又是那个问题……
在 CSS 中,只有整个表格可以滚动,没有简单的方法来固定页眉或页脚。
这里的大多数答案都依赖于 Javascript,这使得调整大小变得难以忍受,或者依赖于固定的列宽,这破坏了 a<table>
或固定表的点。
这是一个不会与表格属性混淆的纯 CSS 解决方案: https ://codepen.io/Lasheimok/pen/jZqRvp
它使用 Firefox 的-moz-element
属性来镜像表外空 div 的页眉和页脚。所以表格的所有样式仍然有效 - 将宽度拉伸到内容,在标题中对齐,在等待 Javascript 重绘表格时没有延迟......
但是仍然存在一些问题:
- 最明显的一个:只有 Firefox
- 左右滚动时,表格滚动,但页眉和页脚不滚动
- 表格底部有一个空白区域,页脚被隐藏
我对 Chrome 版本的研究不多,但它确实具有可以替代使用的类似属性。
大多数情况下我需要最后两点的帮助:如何让页眉与表格的其余部分一起水平滚动,以及如何删除表格底部隐藏页脚的空白空间?