我正在尝试创建一个粘性表标题,但是问题是,我无法获取列的宽度来匹配基表中的列的宽度。
问题似乎是,无论我为表中的各个列设置(或未设置)宽度如何,基于表中内容的不同,列的实际宽度有时会相差很大。
我已经尝试了多种解决方案,到目前为止最成功的方法是将整个表(包括tbody)复制到固定位置的div中,然后在固定位置的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索引似乎也无济于事。 最佳答案
我找到了我的问题的答案:
Fixed Table Cell Width
关键是将col标签与用于设置宽度的类一起使用。现在就像魅力一样。
关于html - 如何获得具有与基础表相同的列宽的粘性表标题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24264755/