如何僅使用 CSS 創(chuàng)建具有固定標(biāo)題和固定列的表格

問題

努力以有組織的方式顯示數(shù)據(jù)，您的目標(biāo)是創(chuàng)建一個具有固定標(biāo)題和固定第一列的 HTML 表格。然而，您的探索發(fā)現(xiàn)了一系列依賴于 JavaScript 或 jQuery 的解決方案，由于不太理想的滾動行為，在移動瀏覽器上引入了潛在的缺陷。因此，你現(xiàn)在的追求集中在尋找一個純 CSS 解決方案。

解決方案

幸運(yùn)的是，新版本的 Chrome、Firefox 和 Edge 都支持粘性屬性，它提供了一種方法實(shí)現(xiàn)所需的行為。您可以將其與溢出：滾動屬性結(jié)合使用，以創(chuàng)建具有固定標(biāo)題和列元素的動態(tài)表格。

步驟

1. 容器：首先放置表格在父 div 內(nèi)并應(yīng)用溢出：滾動到 div，從而啟用滾動。
2. 標(biāo)題和列粘性：利用位置：粘性屬性以及頂部、右側(cè)或左側(cè)值來指定表格元素應(yīng)遵循的邊緣。
3. 第一列標(biāo)題粘性：利用屬性 thead th:first-child 確保第一列的標(biāo)題保持固定在左側(cè)

示例

HTML 標(biāo)記:

<div class="container">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

div {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

thead th:first-child {
  left: 0;
  z-index: 2;
}

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 0.5em;
}

此實(shí)現(xiàn)允許您垂直和水平滾動，同時保留標(biāo)題和第一個列到位，提供改進(jìn)的用戶查看表格數(shù)據(jù)的體驗(yàn)。

以上是如何僅使用 CSS 創(chuàng)建固定標(biāo)題和固定第一列表格？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！