仅限 css - 带有固定标题的表格溢出

Question

如果内容大于容器，我正在尝试构建一个可在 x 和 y 方向滚动的表格。我还希望标题始终在顶部可见。我已经完成了第一部分的工作，标题始终在顶部可见，但是标题列的大小与表格的大小不匹配。

我创建了这个 fiddle :

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>