带有固定标题的 div 表答案

【问题标题】：div table with fixed header带有固定标题的 div 表
【发布时间】：2015-02-10 14:47:56
【问题描述】：

我正在尝试仅使用 div 实现表格，同时将标题设置为固定位置，以便我们可以上下滚动并且标题始终可见。

在我开始实现固定表头之前，假表工作得很好：

但是当我设置position: fixed时，标题或正文的大小会发生变化。

【问题讨论】：

当您将其设置为 position: fixed; 时，您会将其从页面流中移除。最好的方法（或者至少是我发现的更喜欢的方法）是克隆表格，并使用visibility: hidden; 隐藏克隆上除标题之外的所有内容，并将该表格设置为固定位置。
另外，您必须手动设置固定表的宽度。这可能不是最好的解决方案，但它是一个开始：jsfiddle.net/2wc5k450/15
我不想强迫网页有固定的宽度或高度，我想要响应式设计。 :S
您应该在帖子中包含代码的相关部分。有一天 JsFiddle 链接可能会腐烂。

【解决方案1】：

你可以试试using position:sticky，但这里有not very good browser support。或者，您可以在页眉中添加一个 margin-bottom，它正好是它所包含的单元格的高度。

【讨论】：

【解决方案2】：

试试：

.table {
    display: table;
    width: 80%;
    position: fixed;
}

【讨论】：