0

又是那个问题……

在 CSS 中,只有整个表格可以滚动,没有简单的方法来固定页眉或页脚。

这里的大多数答案都依赖于 Javascript,这使得调整大小变得难以忍受,或者依赖于固定的列宽,这破坏了 a<table>或固定表的点。

这是一个不会与表格属性混淆的纯 CSS 解决方案: https ://codepen.io/Lasheimok/pen/jZqRvp

它使用 Firefox 的-moz-element属性来镜像表外空 div 的页眉和页脚。所以表格的所有样式仍然有效 - 将宽度拉伸到内容,在标题中对齐,在等待 Javascript 重绘表格时没有延迟......

但是仍然存在一些问题:

  • 最明显的一个:只有 Firefox
  • 左右滚动时,表格滚动,但页眉和页脚不滚动
  • 表格底部有一个空白区域,页脚被隐藏

我对 Chrome 版本的研究不多,但它确实具有可以替代使用的类似属性。

大多数情况下我需要最后两点的帮助:如何让页眉与表格的其余部分一起水平滚动,以及如何删除表格底部隐藏页脚的空白空间?

4

1 回答 1

0
I fear you should be using some kind of fixed table header plugin.
What they mostly do is create a second table that is fixed, and copy the header html in it. So you have two tables. 

->one with header data

->one with body data.

It should be with javascript, as there is semantically no good way to fix 
this pure in html & css.
If you make up you mind for using js. 
You can go to this url ... 
https://codepen.io/paulobrien/pen/vJLdOE
于 2018-02-06T06:45:11.400 回答