我想创建一个具有固定thead和tfoot可滚动的表tbody！
我已经尝试了几种方法，包括纯CSS和CSS + Javascript，但是它们都很薄弱且不可靠，我可以通过更改演示中的标记轻松地破坏它们。
我想要的是一种使表格表现得像表格的方式，这意味着浏览器将根据内容（在页面加载时调整窗口大小）以及以下情况下的内容自动调整列：
如果列标头（thead > tr > th）的内容大于列正文（tbody > tr > td）的内容且大于列脚注（tfoot > tr > td）的内容，则应根据列标头的大小调整列的大小
如果列的正文（tbody > tr > td）的内容大于列的标题（thead > tr > th）的内容且大于列的页脚（tfoot > tr > td）的内容，则应根据列的正文的大小来调整列的大小
如果列的页脚（tfoot > tr > td）的内容大于列的页眉（thead > tr > th）的内容且大于列的正文（tbody > tr > td）的内容，则应根据列的页脚的大小来调整列的大小
在table下面应澄清的情况：
<table>
<thead>
<tr>
<th>Header one *leads the width* (case 1)</th>
<th>Header two</th>
<th>Header three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer one</td>
<td>Footer two</td>
<td>Footer three *leads the width* (case 3)</td>
</tr>
</tfoot>
</table>
我想要一个干净（尽可能）且可靠的解决方案，该解决方案适用于不同的场景，可能只有CSS，但JavaScript还是可以的（香草和干净的JavaScript，而不是jQuery插件）。我不在乎旧的浏览器支持（拥有它，或者至少找到一个可以在旧的浏览器上正常降级的解决方案，这是很好的，但这是可选的）...我什至可以接受使用divs代替表节点最终的解决方案按预期工作...因此在2016年，使用现代浏览器和CSS可能会以某种方式实现吗？
编辑：
主体应垂直滚动，并且表格可以有任意数量的列
更新：
我想出了以下解决方案：https : //codepen.io/daveoncode/pen/LNomBE，但我仍然不是100％满意。主要问题是我无法为页眉和页脚单元格设置不同的背景。
更新2：
它现在可以工作了！
我终于实现了一个可行的解决方案！
相关的CSS如下：
.wrapper {
width: 90%;
position: relative;
border: 1px solid #000;
background: #efefef;
overflow: hidden;
border-radius: 7px;
}
.container {
overflow-y: auto;
height: 200px;
border-top: 41px solid transparent;
border-bottom: 41px solid transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
td + td {
border-left: 1px solid #fff;
}
td, th {
border-bottom: 1px solid #fff;
background: #efefef;
padding: 10px;
}
thead tr th,
tfoot tr td {
height: 0;
line-height: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
thead tr th div,
tfoot tr td div {
position: absolute;
color: #fff;
height: 20px;
padding: 10px;
margin-left: -10px;
line-height: normal;
width: 100%;
z-index: 2;
text-align: left;
font-weight: bold;
}
thead tr th div {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
tfoot tr td div {
border-top: 1px solid #000;
}
tfoot tr td div.c1,
thead tr th div.c1 {
background: violet;
}
tfoot tr td div.c2,
thead tr th div.c2 {
background: green;
}
tfoot tr td div.c3,
thead tr th div.c3 {
background: yellow;
}
thead tr th div {
top: 0;
}
tfoot tr td div {
bottom: 0;
}
thead tr th:first-child div,
tfoot tr td:first-child div {
border-left: none;
}
这是标记：
<div class="wrapper">
<div class="container">
<table>
<thead>
<tr>
<th>
Header one *leads the width* (case 1)
<div class="c1">
Header one *leads the width* (case 1)
</div>
</th>
<th>
Header two
<div class="c2">
Header two
</div>
</th>
<th>
Header three
<div class="c3">
Header three
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three [first]</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three</td>
</tr>
<tr>
<td>Column one</td>
<td>Column two *leads the width* (case 2)</td>
<td>Column three [LATEST]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Footer one
<div class="c1">
Footer one
</div>
</td>
<td>
Footer two
<div class="c2">Footer two</div>
</td>
<td>
Footer three *leads the width* (case 3)
<div class="c3">Footer three *leads the width* (case 3)</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
它可以在Chrome，Firefox，Safari和IE11上运行（我不知道它在较旧的浏览器中的行为）。在Codepen上查看：https ://codepen.io/daveoncode/pen/LNomBE
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句