CSS：可滚动表格未对齐的列答案

【问题标题】：CSS: scrollable table misaligned ColumnsCSS：可滚动表格未对齐的列
【发布时间】：2018-12-18 16:20:06
【问题描述】：

我正在尝试使用具有悬停效果的固定标题使表格可滚动。我用这个question 来设置我的css 文件。我总是得到未对齐的列： here is my Plnker demo:Plunker demo

有什么帮助吗？

更新：

【问题讨论】：

标签： html css

【解决方案1】：

您的问题是 display: block 规则破坏了表格对齐方式。

你在哪里：

.hoverTable tbody, .hoverTable thead { display: block; width: calc(100% - 17px); }

删除该规则：

.hoverTable tbody, .hoverTable thead { width: calc(100% - 17px); }

你还有 9 个元素和 10 个 td 元素。在thead 的末尾放置一个空的th 以使它们相等。

【讨论】：

谢谢。但我认为我必须保留display: block，因为我需要使表格可滚动，对吗？我删除了它，我的表格变得不可滚动
在现代浏览器中，您可以使整个表格成为可滚动的容器，并使用position:sticky 使标题单元格保持在顶部，如下所示：plnkr.co/edit/NFcutk7xKgXTKoSps21o?p=preview
那么你应该使用不同的模式，比如 Bootstrap 网格。表格非常挑剔，您会费尽心思尝试平衡滚动和对齐，最终花费的时间比仅使用 Bootstrap 或使用 div 的类似网格库的时间长 10 倍。
如果您不支持旧版浏览器，@IlyaStreltsyn 有一个很好的方法。
您遇到的问题是 display: block 不像 display: table （默认）那样强制列之间的垂直对齐。您将需要删除显示块并解决剩余的布局怪癖，或使用非表格响应式布局以确保在所有浏览器中正确显示。 sticky 选项还需要删除 display: block 才能正确呈现。