如何仅使用 CSS 为 Bootstrap 3 表创建固定标头？

Bootstrap 表的固定标头

在 Bootstrap 3 中，创建具有固定标头的表需要纯 CSS 解决方案。以下步骤将指导您完成该过程：

1. 应用 CSS 类： 将以下 CSS 类添加到表中：

   • .tableFixHead 指向包含的 div
   • .tableFixHead thead th 到表头单元格

2. CSS 样式： 插入以下 CSS 样式：

   .tableFixHead          { overflow: auto; height: 100px; }
   .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

3. HTML结构： 确保您的表格具有适当的 HTML结构：

   <div class="tableFixHead">
     <table class="table">
       <thead>
         <tr>
   <th>TH 1</th>
   <th>TH 2</th>
   </tr>
       </thead>
       <tbody>
         <tr>
   <td>A1</td>
   <td>A2</td>
   </tr>
         <tr>
   <td>B1</td>
   <td>B2</td>
   </tr>
         <tr>
   <td>C1</td>
   <td>C2</td>
   </tr>
         <tr>
   <td>D1</td>
   <td>D2</td>
   </tr>
         <tr>
   <td>E1</td>
   <td>E2</td>
   </tr>
       </tbody>
     </table>
   </div>

通过实施此解决方案，桌头将保持固定在桌子顶部，允许正文垂直滚动。

以上是如何仅使用 CSS 为 Bootstrap 3 表创建固定标头？的详细内容。更多信息请关注PHP中文网其他相关文章！