html - 如何获得与基表具有相同列宽的粘性表头

Question

我正在尝试创建一个粘性表格标题，但问题是，我无法让列的宽度与基表中列的宽度相匹配。

问题似乎是，无论我为表格中的各个列设置(或未设置)宽度，列的实际宽度有时会根据表格中的内容而有很大差异。

我已经尝试了很多解决方案，迄今为止最成功的是将整个表格(包括 tbody)复制到一个固定位置的 div 中，然后在固定位置设置表格的 tbody 部分的可见性- 将 div 位置隐藏。

这样做，列宽是相同的，但问题是粘性表的 tbody 虽然不可见，但覆盖了主表，因此无法在上注册悬停状态等主表。

有没有人对如何正确制作在所有情况下都具有适当列宽的粘性表格标题有任何建议？谢谢。

---

编辑:这是我的标记示例:

<div class="sticky">
</div>
<table>
  <thead>
    <!-- Headers here. -->
  </thead>
  <tbody>
    <!-- Tons of sensitive data here, so can't display. -->
  </tbody>
</table>

对于含糊不清，我深表歉意，但我无法显示实际数据，因为它本质上是敏感的。关键是，数据千差万别，无论我做什么，我都无法使列宽固定/一致；他们总是不同。

目前，在页面呈现时，我将整个表格复制到粘性 div 中，然后将 tbody 元素的可见性设置为隐藏。这给出了适当的宽度，但会导致主表被覆盖。在这种情况下，Z 索引似乎也无济于事。

Answer 1

我找到了问题的答案:
Fixed Table Cell Width

关键是使用带有类的 col 标签来设置宽度。现在就像一个魅力。