在表格中滚动时，thead 和 tbody 列边框未对齐 [重复]答案

【问题标题】：thead and tbody column border misaligned on scroll in table [duplicate]在表格中滚动时，thead 和 tbody 列边框未对齐 [重复]
【发布时间】：2020-12-10 16:41:54
【问题描述】：

我正在尝试制作一张表格，而滚动进入 tbody 时，thead 和 tbody 列边框有错位。这是我正在尝试做的示例： codepen table

使用滚动条，它工作正常。

虽然滚动条不在tbody 中，但边框存在一些错位。有没有办法在滚动条出现时保持 thead tr 的宽度？

【问题讨论】：

你不应该在表格中使用 flexbox：它完全违背了表格布局的目的。无论如何，你的布局的问题是你给你的 <thead> 元素的宽度是
只需从标题中删除宽度计算
@AhmedSunny 如果我删除宽度，滚动条出现时会出现同样的问题。
你可能想看：stackoverflow.com/questions/23989463/…
如果 hte 链接没有为您提供任何提示，那么您可能想要使用 overflow-y: scroll; 而不是 auto for tbody ...这里也不需要 flex ;) codepen.io/gc-nomade/pen/qBZqPKG跨度>

标签： html css

【解决方案1】：

首先，尝试使用代码 sn-ps 来显示您的代码。

但你的问题在于第 35 行的 CSS：

thead tr {
  width: calc(100% - 17px);
}

你说你的头和身体有偏差，这是因为你在thead而不是tbody上从100%上减少了17px

【讨论】：

带滚动条就好了