如何僅使用 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中文網其他相關文章！