如何仅使用 CSS 创建具有固定标题的可滚动表格？

使用 CSS 的带有固定标题的滚动表

固定标题的纯 CSS 解决方案

问题：

创建一个带有固定标题的可滚动表格页脚仅使用 CSS 和有效的表格标签，无需 JavaScript 或 jQuery。确保页眉、页脚和内容行之间的列对齐保持一致。

解决方案：

使用位置：粘性

1. 将桌子包裹起来div: 这将定义滚动区域。

   div {
     display: inline-block;
     height: 150px;
     overflow: auto;
   }

2. 应用位置：粘在表格上headers:

   table th {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
   }

样式

将表格外观自定义为需要：

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

示例：

<div>
  <table border="0">
    <thead>
      <tr>
        <th scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">head4</th>
      </tr>
    </thead>
    <tbody>
      <!-- Insert rows here -->
    </tbody>
  </table>
</div>

注意：

• 检查与位置的兼容性：在使用 CanIUse 等资源之前先粘一下。
• 在某些情况下浏览器中，标题可能与内容不完全对齐。如有必要，调整粘性属性中的顶部值。
• 此解决方案仅允许垂直滚动。不支持水平滚动。

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