表格（Tables）

优质

小牛编辑

126浏览

2023-12-01

Bootstrap为构建表提供了一个干净的布局。 Bootstrap支持的一些表元素是 -

标签	描述
<table>	用于以表格格式显示数据的包装元素
<thead>	表标题行（tr）的容器元素，用于标记表列。
<tbody>	表格主体中的表行（tr）的容器元素。
<tr>	显示在单行上的一组表格单元格（td或th）的容器元素。
<td>	默认表格单元格。
<th>	列（或行，取决于范围和位置）标签的特殊表格单元格。必须在 thead中使用
<caption>	表格的描述或摘要。

基本表

如果你想要一个漂亮的基本表格样式，只需要一些轻量级填充和水平分隔，可以将.table的基类添加到任何表中，如下例所示 -

<table class = "table">
   <caption>Basic Table Layout</caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

可选的表类

除了基表标记和.table类之外，还有一些其他类可用于设置标记样式。以下部分将为您提供所有这些类的一瞥。

条纹表

通过添加.table-striped类，您将在“tbody”中的行上获得条.table-striped ，如以下示例所示 -

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

边界表

通过添加.table-bordered类，您将获得围绕整个表的每个元素和圆角的边框，如以下示例所示 -

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

悬停表

通过添加.table-hover类，当光标悬停在行上时，将在行中添加浅灰色背景，如下例所示 -

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

凝聚表

通过添加.table-condensed类，将行填充减半以压缩表。如下例所示。如果您想要更密集的信息，这非常有用。

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

上下文类

下表中显示的Contextual类将允许您更改表行或单个单元格的背景颜色。

类	描述
.active	将悬停颜色应用于特定行或单元格
.success	表示成功或积极的行动
.warning	表示可能需要注意的警告
.danger	表示危险或潜在的负面行为

这些类可以应用于

，或。

<table class = "table">
   <caption>Contextual Table Layout</caption>
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody>
      <tr class = "active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      <tr class = "success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      <tr class = "warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      <tr class = "danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

响应表

通过将任何.table包装在.table-responsive类中，您将使表格水平滚动到小型设备（768px以下）。在大于768px宽的任何东西上观看时，您将看不到这些表格中的任何差异。

<div class = "table-responsive">
   <table class = "table">
      <caption>Responsive Table Layout</caption>
      <thead>
         <tr>
            <th>Product</th>
            <th>Payment Date</th>
            <th>Status</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Product1</td>
            <td>23/11/2013</td>
            <td>Pending</td>
         </tr>
         <tr>
            <td>Product2</td>
            <td>10/11/2013</td>
            <td>Delivered</td>
         </tr>
         <tr>
            <td>Product3</td>
            <td>20/10/2013</td>
            <td>In Call to confirm</td>
         </tr>
         <tr>
            <td>Product4</td>
            <td>20/10/2013</td>
            <td>Declined</td>
         </tr>
      </tbody>
   </table>
</div>