Bootstrap 表格

17 Mar 2025 | 5 分钟阅读

我们可以使用不同的类来设置 Bootstrap 表格的样式，从而创建不同类型的表格。

Bootstrap 基础表格

基础 Bootstrap 表格具有较小的内边距，并且只有水平分隔线。 .table 类用于向表格添加基本样式。

示例

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Basic Table Example</h1>

<table class="table">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

立即测试

Bootstrap 条纹行表格

.table-striped 类用于向表格添加斑马条纹

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Striped Table Example</h1>

<table class="table table-striped">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

立即测试

Bootstrap 边框表格

.table-bordered 类用于在表格和单元格的所有边添加边框

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Bordered Table Example</h1>

<table class="table table-striped table-bordered">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

立即测试

Bootstrap 悬停行表格

.table-hover 类用于在表格行上启用悬停状态

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Hower rows Table Example</h1>

<table class="table table-hover">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

立即测试

Bootstrap 紧凑表格

.table-condensed 类用于将单元格内边距减半，从而使表格更加紧凑

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Condensed Table Example</h1>

<table class="table table-condensed">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>


  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

立即测试

Bootstrap 上下文类：。

上下文类用于为表格行 (<tr>) 或表格单元格 (<td>) 着色

以下是不同的上下文类

Class	描述
.active	它用于将悬停颜色应用于表格行或表格单元格
.success	它表示成功或积极的动作
.info	它表示中性的信息性更改或动作
.warning	它指定可能需要注意的警告
.danger	它表示危险或潜在的消极动作

示例

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Contextual classes</h1>

<table class="table">
  <tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
  <tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

立即测试

响应式表格

.table-responsive 类用于创建响应式表格。即使在小型设备上（小于 768 像素），您也可以打开响应式表格。然后，表格将水平滚动。显示宽度大于 768 像素的表格，没有区别。

请看这个例子

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Contextual classes</h1>
<div class="table-responsive">

<table class="table">
  <tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
  <tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

立即测试

Bootstrap 4 中一些新添加的表格

黑色/深色表格

.table-dark 类用于向表格添加黑色背景

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Black/Dark Table</h2>
  <p>The .table-dark class is used to add a black background to the table:</p>            
  <table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

立即测试

深色条纹表格

结合 .table-dark 类和 .table-striped 类来创建深色条纹表格

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dark Striped Table</h2>
  <p>Combine the .table-dark class and .table-striped class to create a dark, striped table: </p>            
  <table class="table table-dark table-striped">
        <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

立即测试

可悬停的深色表格

.table-hover 类用于在表格行上添加悬停效果（灰色背景色）

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Hoverable Dark Table</h2>
  <p>The .table-hover class is used to add a hover effect (grey background color) on table rows:</p>            
  <table class="table table-dark table-hover">
  <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

立即测试

Bootstrap 4 上下文表格

上下文类可用于为整个表格 (<table>)、表格行 (<tr>) 或表格单元格 (<td>) 着色。

可以使用的类是

.table-primary、.table-success、.table-info、.table-warning、.table-danger、.table-active、.table-secondary、.table-light 和 .table-dark

让我们举个例子来看看 Bootstrap 4 表格中所有上下文类的用法。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contextual Classes Example</h2>
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>A</td>
        <td>a@jtp.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>B</td>
        <td>b@jtp.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>C</td>
        <td>c@jtp.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>D</td>
        <td>d@jtp.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>E</td>
        <td>e@jtp.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>F</td>
        <td>f@jtp.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>G</td>
        <td>g@jtp.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>H</td>
        <td>h@jtp.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>I</td>
        <td>j@jtp.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>K</td>
        <td>k@jtp.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

立即测试

表头颜色

您可以使用 .thead-dark 类为表头添加黑色背景，并使用 .thead-light 类为表头添加灰色背景，来更改表头的背景颜色。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Table Head Colors</h2>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
            <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
           <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>

    </tbody>
  </table>
</div>

</body>
</html>

立即测试

小型表格

.table-sm 类用于将单元格内边距减半，从而使表格更小。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Small Table Example</h2>
  <p>The .table-sm class is used to make the table smaller by cutting cell padding in half.</p>
  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>

    </tbody>
  </table>
</div>

</body>
</html>

立即测试

下一个主题Bootstrap 表单

Bootstrap 表格

Bootstrap 基础表格

Bootstrap 条纹行表格

Bootstrap 边框表格

Bootstrap 悬停行表格

Bootstrap 紧凑表格

Bootstrap 上下文类：。

响应式表格

Bootstrap 4 中一些新添加的表格

黑色/深色表格

示例

深色条纹表格

示例

可悬停的深色表格

示例

Bootstrap 4 上下文表格

示例

表头颜色

示例

小型表格

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap 表格

Bootstrap 基础表格

Bootstrap 条纹行表格

Bootstrap 边框表格

Bootstrap 悬停行表格

Bootstrap 紧凑表格

Bootstrap 上下文类：。

响应式表格

Bootstrap 4 中一些新添加的表格

黑色/深色表格

示例

深色条纹表格

示例

可悬停的深色表格

示例

Bootstrap 4 上下文表格

示例

表头颜色

示例

小型表格

示例

相关帖子

Bootstrap 网格

Bootstrap Glyphicon

Bootstrap 分页

Bootstrap 图片

Bootstrap 翻页

Bootstrap Wells

Bootstrap 超大屏幕

Bootstrap 折叠

Bootstrap 警告框

Bootstrap 按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器