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 Dodgers023********
代码解释
这⾥的“技巧”部分是position: sticky;⽤法，但更重要的是你必须知道如何处理重叠元素。
固定表格单元格需要有背景，否则我们会看到重叠的内容。它还需要适当的z-index处理，以便当它固定到位时，它会位于它应该位于的顶部。这感觉是最棘⼿的部分：确保tbody>th单元格位于常规表格单元格上⽅，以便它们在⽔平滚动期间保持在顶部。
确保thead>th单元格在这些单元格之上，以便垂直滚动。
确保thead>th:first-child单元格是最⾼的，因为它需要位于正⽂单元格上⽅，并且它⼜是⽔平滚动的同级标题。
css固定定位只固定Table表头
如果只想固定Table表头，那么很简单，我们只需把前⾯的HTML代码
...这列即是第⼀列去掉即可。
只固定Table表头

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。