Bootstrap 表格 - 蝴蝶教程

基本表格

基本的 Bootstrap 表格带有浅色填充和水平分隔线。

.table 类向表格添加基本样式：

<div class ="container">
   <h2>基本表格</h2>
   <p>.table类向表格添加基本样式（浅色填充和水平分隔线）：</p>
   <table class ="table">
     <thead>
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td> John </td>
         <td> Doe </td>
         <td> john@example.com </td>
       </tr>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
</div>

尝试一下

.table-sm 类通过将单元格填充减半来使表变小：

<div class ="container">
   <h2>Small Table</h2>
   <table class ="table table-bordered table-sm">
     <thead>
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td> John </td>
         <td> Doe </td>
         <td> john@example.com </td>
       </tr>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
</div>

尝试一下

条纹行表格

.table-striped 类将斑马条纹添加到表中：

<div class ="container">
   <h2>条纹行</h2>
   <p>.table-striped类将斑马条纹添加到表中：</p>
   <table class ="table table-striped">
     <thead>
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td> John </td>
         <td> Doe </td>
         <td> john@example.com </td>
       </tr>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
</div>

尝试一下

边框表格

.table-bordered 类在表格和单元格的所有侧面添加边框：

<div class ="container">
   <h2>边框表格</h2>
   <p>.table-bordered类在表格和单元格的所有侧面添加边框：</p>
   <table class ="table table-bordered">
     <thead>
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td> John </td>
         <td> Doe </td>
         <td> john@example.com </td>
       </tr>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
</div>

尝试一下

.table-borderless 类从表格中删除边框：

<div class ="container">
   <h2>无边框表格</h2>
   <p>.table-borderless类从表格中删除边框：</p>
   <table class ="table table-borderless">
     ...
   </table>
</div>

尝试一下

悬停行

.table-bordered 类在表行上添加了悬停效果（鼠标经过悬停行时让行变成灰色背景色）

<div class ="container">
   <h2>悬停行</h2>
   <p>.table-hover类在表行上添加了悬停效果：</p>
   <table class ="table table-hover">
     <thead>
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td> John </td>
         <td> Doe </td>
         <td> john@example.com </td>
       </tr>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
</div>

尝试一下

黑色背景表格

.table-bordered 类在表行上添加了悬停效果（鼠标经过悬停行时让行变成灰色背景色）

<div class ="container">
   <h2>黑色背景</h2>
   <p>.table-dark类向表添加黑色背景：</p>
   <table class ="table table-dark">
     <thead>
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td> John </td>
         <td> Doe </td>
         <td> john@example.com </td>
       </tr>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
</div>

尝试一下

组合.table-dark和.table-striped创建一个黑色背景的，带条纹的表：

<div class ="container">
   <h2>黑色背景</h2>
   <p>组合.table-dark和.table-striped创建一个黑色背景的，带条纹的表：</p>
   <table class ="table table-dark table-striped">
     <thead>
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td> John </td>
         <td> Doe </td>
         <td> john@example.com </td>
       </tr>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
</div>

尝试一下

当然你也可以组合.table-dark和.table-hover创建一个黑色背景的带有鼠标经过悬停效果的表格

表格类样式

表格类可用于为整个表（<table>），表行（<tr>）或表单元格（<td>）着色。

可以使用的表格类有：

类名	描述
.table-primary	蓝色：表示重要的动作
.table-success	绿色：表示成功或积极的行动
.table-danger	红色：表示危险或潜在的负面行为
.table-info	浅蓝色：指示中性的信息更改或操作
.table-warning	橙色：表示可能需要注意的警告
.table-active	灰色：将悬停颜色应用于表格行或表格单元格
.table-secondary	灰色：表示一个不太重要的操作
.table-light	浅灰色表或表行背景
.table-dark	深灰色表或表行背景

下面示例演示了各个类在表格中的使用：

<div class ="container">
   <h2>表格类</h2>
   <p>表格类可用于为表，表行或表单元格上色。可以使用的类为：.table-primary，.table-success，.table-info，.table-warning，.table-danger，.table-active，.table-secondary，.table-light和.table-dark：</p>
    <table class="table">
        <thead>
          <tr>
            <th>名字</th>
            <th>姓氏</th>
            <th>电子邮件</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>默认</td>
            <td> Defaultson </td>
            <td> def@somemail.com </td>
          </tr>
          <tr class="table-primary">
            <td>主要</td>
            <td>乔</td>
            <td> joe@example.com </td>
          </tr>
          <tr class="table-success">
            <td>成功</td>
            <td> Doe </td>
            <td> john@example.com </td>
          </tr>
          <tr class="table-danger">
            <td>危险</td>
            <td>萌</td>
            <td> mary@example.com </td>
          </tr>
          <tr class="table-info">
            <td>信息</td>
            <td>杜利</td>
            <td> july@example.com </td>
          </tr>
          <tr class="table-warning">
            <td>警告</td>
            <td>参考</td>
            <td> bo@example.com </td>
          </tr>
          <tr class="table-active">
            <td>活动</td>
            <td> Activeson </td>
            <td> act@example.com </td>
          </tr>
          <tr class="table-secondary">
            <td>中学</td>
            <td>第二个</td>
            <td> sec@example.com </td>
          </tr>
          <tr class="table-light">
            <td>光</td>
            <td>安吉</td>
            <td> angie@example.com </td>
          </tr>
          <tr class="table-dark text-dark">
            <td>黑暗</td>
            <td> Bo </td>
            <td> bo@example.com </td>
          </tr>
        </tbody>
    </table>
</div>

尝试一下

表头颜色

.thead-dark 类将黑色背景添加到表标题，.thead-light 类将灰色背景添加到表标题：

<div class ="container">
   <table class ="table">
     <thead class="thead-dark">
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
   <table class ="table">
     <thead class="thead-light">
       <tr>
         <th>名字</th>
         <th>姓氏</th>
         <th>电子邮件</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>玛丽</td>
         <td>萌</td>
         <td> mary@example.com </td>
       </tr>
       <tr>
         <td>七月</td>
         <td>杜利</td>
         <td> july@example.com </td>
       </tr>
     </tbody>
   </table>
</div>

尝试一下

响应式表格

.table-sensitive 类创建一个响应表：在宽度小于992px的屏幕上（如果需要）将水平滚动条添加到该表。在宽等于992px屏幕上观看时，没有区别：

<div class ="container">
   <div class ="table-responsive">
      <table class="table table-bordered">
         ......
      </table>
   </div>
</div>

尝试一下

您还可以根据屏幕宽度来决定何时该表格应具有滚动条：

类名	屏幕宽度
.table-responsive-sm	<576px
..table-responsive-md	<768px
.table-responsive-lg	<992px
.table-responsive-xl	<1200px

.table-sensitive-sm 类创建一个响应表，该表将在宽度小于576像素的屏幕上水平滚动。

<div class ="container">
    <div class ="table-responsive-sm">
          <table class="table table-bordered">
            ......
          </table>
    </div>
 </div>

尝试一下