如何僅使用 CSS 在表格中建立固定標題和列？

使用純CSS 固定表格中的標題和列

使用純CSS 建立具有固定標題和固定第一列的表格可以可以可以固定第一列的表格可以使用position:sticky屬性來實現。這種方法比依賴 JavaScript 或 jQuery 的解決方案更有效率且跨瀏覽器相容。

解決方案：

1. 包裹表格在容器中：

   `

   🎜>
   `

2. 在容器上啟用捲動:

   `div.container {

   溢位:捲動;
   }`
   

3. 黏桌子標題：

   `標題{

   位置：-webkit-sticky; /
   對於Safari / 位置：黏性；
   上：0;
   }`
   

4. 黏第一列：

   `第{

   位置： -webkit-粘性； /
   對於Safari / 位置：黏性；
   左：0;
   }`
   

5. 可選： 黏性左上角第一列的標題：

   `thead th:first -child {

   left: 0;
   z-index: 2;
   }`
   

附加說明:

為了獲得最佳性能，容器應具有最大寬度和高度
• 如果第一列包含；elements 而非 ，在CSS 中使用tbody td:first-child 而不是 tbody th。
• 要進一步設定標題和第一列的樣式，請根據需要調整 CSS 屬性。

• 範例：

  <div class="container">
    <table border="1">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>1</th>
          <td>John Doe</td>
          <td>john@example.com</td>
          <td>(555) 123-4567</td>
        </tr>
        <tr>
          <th>2</th>
          <td>Jane Smith</td>
          <td>jane@example.com</td>
          <td>(555) 234-5678</td>
        </tr>
        <!-- More rows... -->
      </tbody>
    </table>
  </div>

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