具有可变列宽的可滚动表 - 以及固定的页眉和页脚

Question

再次提出这个问题......

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

这里的大多数答案都依赖于Javascript，这会使调整大小难以忍受，或者取决于固定的列宽，这会使<table>或固定表的位置失效。

这是一个仅限CSS的解决方案，不会破坏表的属性： https://codepen.io/Lasheimok/pen/jZqRvp

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

但仍有一些问题：

• 最明显的一个：它只是Firefox
• 向左和向右滚动时，表格会滚动，但页眉和页脚不会
• 桌子底部有一个隐藏页脚的空白区域

我对Chrome版本的看法并不多，但确实有类似的属性可供使用。

大多数情况下，我需要最后两点的帮助：如何将标题与表格的其余部分水平滚动，以及如何删除表格底部隐藏页脚的空白区域？

Answer 1

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