我正在尝试创建一个粘性表头,但问题是,我无法让列的宽度与基表中列的宽度相匹配。
问题似乎是,无论我为表中的各个列设置(或未设置)的宽度如何,列的实际宽度有时会根据表中的内容而有很大差异。
我尝试了许多解决方案,迄今为止最成功的是将整个表格(包括 tbody)复制到固定位置 div 中,然后在固定位置 div 中设置表格的 tbody 部分的可见性到隐藏。
通过这样做,列宽是相同的,但问题是粘性表的 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 索引似乎也无济于事。