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

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 元素的可见性设置为 hidden。这给出了适当的宽度，但会导致主表被覆盖。在这种情况下，Z 索引似乎也无济于事。

Answer 1

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

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