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>