如何在 HTML 表格中建立固定標題和列？

創建具有固定標題和列的HTML 表格

使用大量HTML 表格時，丟失重要列標題可能會令人沮喪和滾動標題時的行數據。值得慶幸的是，有 CSS 和 JavaScript 技術來建立固定標題和列，確保輕鬆導航。

如何實現固定標題和固定列：

要實現這一點，我們可以利用以下方法：

1. 創建固定表頭：使用CSS 來固定表格的 。使用position：sticky屬性將元素定位。這將使標題在您滾動時保持在表格頂部可見。
2. 修正第一列：要修正第一列，請建立一個
   ;包裹第一列的儲存格。設定此

   的位置為 Sticky，並將 left 屬性設為 0。這會將列錨定到視口的最左邊緣。

   範例實作：

   以下是實現此效果的程式碼：

   <code class="html"><style>
     thead {
       position: sticky;
       top: 0;
     }
   
     .fixed-column {
       position: sticky;
       left: 0;
     }
   </style>
   
   <table>
     <thead>
       <tr>
         <th class="fixed-column">ID</th>
         <th>Name</th>
         <th>Age</th>
       </tr>
     </thead>
     <tbody>
       <!-- Data rows -->
     </tbody>
   </table></code>

   登入後複製

   注意：

   注意：

以上是如何在 HTML 表格中建立固定標題和列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！