我正在尝试使用 bootstrap 3 表制作一个具有固定标题和可滚动内容的表格。
不幸的是，我发现的解决方案不适用于引导程序或搞乱风格。
这里有一个简单的引导表，但由于某种原因我不知道 tbody 的高度不是 10px。
height: 10px !important; overflow: scroll;
Example:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>
固定桌头 - 仅 CSS
Simply position: sticky; top: 0; your th元素。（铬、FF、边缘）
.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边界问题修复
Since border无法在翻译后正确绘制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“ 元素，至少直到table元素（包含），做Not set overflow相关样式（例如overflow, overflow-x, overflow-y).
有关更多信息，请参阅 stackoverflow.com/为什么“位置：粘性”不起作用？
固定表头 - 使用 JavaScript
For 古代浏览器，你可以使用一些 JS 和翻译Y the 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
