html - CSS：可滚动表格未对齐的列

Question

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

请问有什么帮助吗？

更新：

标签： htmlcss

Answer 1

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

你在哪里：

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

删除该规则：

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

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