只有css - 固定表头溢出

Question

我想建立一个表格，如果内容大于容器，可以在x和y方向滚动。我也希望标题始终在顶部可见。我已经完成了第一部分工作，并且标题始终在顶部可见，但标题列大小与表格大小不匹配。

我创造了这个小提琴：

http://jsfiddle.net/xxQQS/1/

我一个CSS唯一的解决办法了。

编辑：似乎有一些人似乎认为这不能只用CSS来完成。这可能是真的，但是请不要只是发帖说'不能这样做'。如果你能解释为什么没有CSS就无法完成，我会接受你的答案。

Answer 1

创建表格的克隆。对于第一个表格，使用visibility: hidden隐藏除标题外的所有行。使用visibility: hidden隐藏另一个表的标题。将你的表格放置在具有溢出属性的div中，设置如下：

<div style="overflow-x: hidden; width: 400px;"> 
    <div style="overflow-y: hidden; height: 20px;"> 
     <table id="head-only"> 
     </table> 
    </div> 
    <div style="overflow-y: scroll; height: 100px;"> 
     <table id="body-only"> 
     </table> 
    </div> 
</div> 

Answer 2

可能是这个，你必须使用JS。选中此项http://www.tablefixedheader.com/