html顶部table固定,CSS实现：固定Table表头和第一列

当表格内容太多的时候，固定表头不让标题滚出屏幕外，是一个很人性化的设计；而当横向项目内容太多时，固定第一列(项目列)也是一个很贴心的设计。本文介绍如何用CSS实现固定Table表头和第一列。

固定Table表头和第一列

CSStable {

font-family: "Fraunces", serif;

font-size: 125%;

white-space: nowrap;

margin: 0;

border: none;

border-collapse: separate;

border-spacing: 0;

table-layout: fixed;

border: 1px solid black;

}

table td,

table th {

border: 1px solid black;

padding: 0.5rem 1rem;

}

table thead th {

padding: 3px;

position: sticky;

top: 0;

z-index: 1;

width: 25vw;

background: white;

}

table td {

background: #fff;

padding: 4px 5px;

text-align: center;

}

table tbody th {

font-weight: 100;

font-style: italic;

text-align: left;

position: relative;

}

table thead th:first-child {

position: sticky;

left: 0;

z-index: 2;

}

table tbody th {

position: sticky;

left: 0;

background: white;

z-index: 1;

}

caption {

text-align: left;

padding: 0.25rem;

position: sticky;

left: 0;

}

[role="region"][aria-labelledby][tabindex] {

width: 450px;

height: 400px;

overflow: auto;

box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.5);

outline: 0;

}

HTML

Teams123456789Runs

Milwaukee Brewers20410303417Los Angles Dodgers02313432422

代码解释

这里的“技巧”部分是position: sticky;用法，但更重要的是你必须知道如何处理重叠元素。

固定表格单元格需要有背景，否则我们会看到重叠的内容。它还需要适当的z-index处理，以便当它固定到位时，它会位于它应该位于的顶部。这感觉是最棘手的部分：确保tbody>th单元格位于常规表格单元格上方，以便它们在水平滚动期间保持在顶部。

确保thead>th单元格在这些单元格之上，以便垂直滚动。

确保thead>th:first-child单元格是最高的，因为它需要位于正文单元格上方，并且它又是水平滚动的同级标题。

只固定Table表头

如果只想固定Table表头，那么很简单，我们只需把前面的HTML代码

...这列即是第一列去掉即可。

只固定Table表头