Question

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

我创造了这个小提琴：

我正在使用仅限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来实现。

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

3 个答案: