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

Answer 3

我也在寻找粘性标题的解决方案，以便在我的网站中使用它。最后，我找到了一个Jquery插件，它可以无缝地完成这个粘性的头部部分。https://github.com/jmosbech/StickyTableHeaders

您不需要添加任何CSS，插件会处理它。它在滚动过程中克隆表头。初始化非常简单

$('table').stickyTableHeaders();

希望这会有所帮助:)正如在其他答案中所说的，我猜这不能仅仅通过CSS来实现。