table 固定表頭

在网页设计中，当页面滚动时让表格的头部固定在屏幕顶部是一个常见的需求。这可以通过使用CSS来实现。下面是一种实现方法，它适用于HTML表格。

HTML 结构

首先，确保你的表格有一个 <thead> 标签，用于包含表头行。

<table>
    <thead id="table-header">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <!-- 更多列 -->
        </tr>
    </thead>
    <tbody>
        <!-- 表格数据行 -->
    </tbody>
</table>

CSS 样式

然后，你可以使用CSS来使表头在滚动时保持在顶部。这里使用了 position: sticky 属性，它可以创建一个粘性定位的元素。

/* 为整个表格设置样式 */
table {
    width: 100%;
    border-collapse: collapse;
}

/* 设置表头的样式，并使其在滚动时固定 */
#table-header {
    position: -webkit-sticky; /* Safari 支持 */
    position: sticky;
    top: 0; /* 距离顶部的位置 */
    background-color: #f8f8f8; /* 背景颜色，以保持表头的可读性 */
    z-index: 1; /* 确保表头在其他元素之上 */
}

/* 设置表头单元格的样式 */
th {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

注意事项

• 使用 position: sticky 需要浏览器支持，目前大多数现代浏览器都支持这个属性。
• 当表格具有滚动条时（例如，表格非常宽），你可能需要调整CSS以适应这种情况。
• 为了提高用户体验，给表头添加背景色，这样当页面滚动时，表头仍然清晰可见。
• 如果表格内容较多且高度超过视口，可以考虑给表格容器添加一个固定高度并启用内部滚动，这样只有表格内容会滚动而不会影响到页面其他部分。