如何仅使用 CSS 创建固定标题和固定第一列表格？

如何仅使用 CSS 创建具有固定标题和固定列的表格

问题

努力以有组织的方式显示数据，您的目标是创建一个具有固定标题和固定第一列的 HTML 表格。然而，您的探索发现了一系列依赖于 JavaScript 或 jQuery 的解决方案，由于不太理想的滚动行为，在移动浏览器上引入了潜在的缺陷。因此，你现在的追求集中在寻找一个纯 CSS 解决方案。

解决方案

幸运的是，新版本的 Chrome、Firefox 和 Edge 都支持粘性属性，它提供了一种方法实现所需的行为。您可以将其与溢出：滚动属性结合使用，以创建具有固定标题和列元素的动态表格。

步骤

1. 容器：首先放置表格在父 div 内并应用溢出：滚动到 div，从而启用滚动。
2. 标题和列粘性：利用位置：粘性属性以及顶部、右侧或左侧值来指定表格元素应遵循的边缘。
3. 第一列标题粘性：利用属性 thead th:first-child 确保第一列的标题保持固定在左侧

示例

HTML 标记:

<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;
}

此实现允许您垂直和水平滚动，同时保留标题和第一个列到位，提供改进的用户查看表格数据的体验。

以上是如何仅使用 CSS 创建固定标题和固定第一列表格？的详细内容。更多信息请关注PHP中文网其他相关文章！