具有固定页眉和页脚的HTML表格和不具有固定宽度的可滚动正文
具有固定页眉和页脚的HTML表格和不具有固定宽度的可滚动正文
提问于 2016-05-17 17:32:43
我想创建一个具有固定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是OK (香草和干净的JavaScript，而不是jQuery插件)。我不关心旧浏览器的支持(如果有它就太好了，或者至少能达成一个可以在旧浏览器上优雅地降级的解决方案，但这是可选的)……如果最终的解决方案如预期的那样工作，我甚至可以接受使用div代替表节点……那么，在2016年，有了现代浏览器和CSS，这有可能实现吗？！
编辑：
正文应该垂直滚动，并且表可以有任意数量的列
更新：
我想出了这个解决方案：https://codepen.io/daveoncode/pen/LNomBE，但我仍然不是100%满意。主要的问题是我不能为页眉和页脚单元格设置不同的背景。
更新2:
它现在起作用了！
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-05-18 17:30:46
我终于实现了一个可行的解决方案！
相关的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、火狐、Safari和IE11上运行(我不知道它在老浏览器上的表现如何)。在codepen上查看：https://codepen.io/daveoncode/pen/LNomBE
Stack Overflow用户
发布于 2019-10-23 17:37:25
具有固定页眉和页脚的CSS表，可滚动的正文没有固定的宽度，仅使用。
这是一个简单的逻辑，我们可以使用表头put position: sticky方法下面的例子：
table th {
position:sticky;
top: 0;
}Stack Overflow用户
发布于 2016-05-17 18:32:55
您可以通过对表(div)使用包装器并将来自thead和tfoot的tr设置为position:absolute来实现所需的功能
body {
margin: 0
}
div {
max-height: 500px;
overflow-y: auto;
}
table {
width: 100%
}
thead tr,
tfoot tr {
position: absolute;
left: 0;
right: 15px;
/* to not cover the scrollbar*/
background: red
}
thead th,
tfoot td {
display: inline-block;
}
thead tr {
top: 0
}
tfoot tr {
top: 500px/* same value has max-height from div */
}
th,
td {
width: calc((100%/3) - 5px);
font-size: 12px;
text-align: center
}
/*give some space between thead and tfoot*/
tbody tr:first-of-type td {
padding-top: 35px;
}
tbody tr:last-of-type td {
padding-bottom: 35px;
}<div>
<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>
<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</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</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>
</tbody>
<tfoot>
<tr>
<td>Footer one</td>
<td>Footer two</td>
<td>Footer three *leads the width* (case 3)</td>
</tr>
</tfoot>
</table>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37272331
复制相关文章
相似问题