固定表头- css
简单位置:粘;上图:0;第th个元素。(Chrome, FF, Edge)
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
对于黏滞的垂直TH和水平TH列(在TBODY内部):
.tableFixHead { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }
.tableFixHead { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; white-space: nowrap; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr><th></th><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr>
<tr><th>Bar</th><td>B1</td><td>B2</td></tr>
<tr><th>Baz</th><td>C1</td><td>C2</td></tr>
<tr><th>Fuz</th><td>D1</td><td>D2</td></tr>
<tr><th>Zup</th><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
TH边界问题修复
由于不能在平移后的TH元素上正确地绘制边界，
要重新创建和渲染“边框”，使用box-shadow属性:
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
TH粘不工作修复
确保“th”元素的父元素，至少到表元素(包括)，没有设置溢出相关的样式(例如overflow, overflow-x, overflow-y)。
有关更多信息，请参阅stackoverflow.com/Why 'position:粘性'不工作吗?
修正表头-使用JavaScript
对于古老的浏览器，你可以使用一点JS并翻译th元素
// Fix table head example:
function tableFixHead(evt) {
const el = evt.currentTarget,
sT = el.scrollTop;
el.querySelectorAll("thead th").forEach(th =>
th.style.transform = `translateY(${sT}px)`
);
}
document.querySelectorAll(".tableFixHead").forEach(el =>
el.addEventListener("scroll", tableFixHead)
);
.tableFixHead {
overflow-y: auto;
height: 100px;
}
/* Just common table stuff. */
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 16px;
}
th {
background: #eee;
}
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
