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

时间:2014-06-17 13:11:18

标签: html css sticky column-width fixed-header-tables

我正在尝试创建一个粘性表头,但问题是,我无法获得列的宽度以匹配基表中列的宽度。

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

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

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

有没有人对如何正确地执行在所有情况下都具有正确列宽的粘性表头有任何建议?谢谢。


编辑:以下是我的标记示例:

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

我为模糊而道歉,但我无法显示实际数据,因为它本质上是敏感的。关键是,数据变化很大,无论我做什么,我都不能让列宽固定/一致;他们经常不同。

目前,在页面渲染时,我将整个表复制到sticky div中,然后将tbody元素的可见性设置为hidden。这给出了适当的宽度,但是导致主表被覆盖。在这种情况下,Z-indexing似乎没有任何帮助。

1 个答案:

答案 0 :(得分:0)

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

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