仅限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>