我想创建一个固定的thead
和tfoot
和一个可滚动的tbody
表!
我尝试过几种方法,包括CSS和CSS + Javascript,但它们都很弱,不可靠,我可以通过改变演示中的标记来轻松地 * 打破 * 它们。
我想要的是一种让表格表现得像表格的方法,这意味着浏览器将根据内容自动调整列(无论是在页面加载时还是在窗口调整大小的情况下),并且在以下情况下:
1.如果列标题的内容(thead > tr > th
)大于列正文的内容(tbody > tr > td
)并且大于列页脚的内容(tfoot > tr > td
),则应根据列标题的大小调整列的大小
1.如果列正文的内容(tbody > tr > td
)大于列页眉的内容(thead > tr > th
),并且大于列页脚的内容(tfoot > tr > td
),则应根据列正文的大小调整列的大小
1.如果列页脚的内容(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插件)。我不关心旧的浏览器支持(这将是伟大的,有它或至少达到一个解决方案,可以优雅地降低旧的浏览器,但它是可选的)...我甚至可以接受使用div
s而不是表节点,如果最终的解决方案能按预期工作的话……那么在2016年,有了现代浏览器和CSS,这可能吗?!
编辑:
正文应该垂直滚动,表格可以有任意数量的列
4条答案
按热度按时间wsewodh21#
仅使用CSS,具有固定页眉和页脚的HTML表格以及没有固定宽度的可滚动正文。
这是一个简单的逻辑,我们可以使用表头putposition:sticky方法下面的例子:
rggaifut2#
更新2022
现在和一段时间浏览器完全支持
position: sticky
因此我们可以将其应用于
thead th
和tfoot tr
旧答案
您可以通过对表(
div
)使用 Package 器并将tr
从thead
和tfoot
变为position:absolute
来实现所需的功能5anewei63#
我终于找到了一个可行的解决方案!
相关CSS如下:
这就是标记:
它可以在Chrome,Firefox,Safari和IE11上运行(我不知道它在旧浏览器上的表现如何)。在codepen上查看:https://codepen.io/daveoncode/pen/LNomBE
kninwzqo4#