html - 滚动时表格行内容渗入粘性标题内容 - 相对与绝对定位相关

标签 html css html-table ellipsis

我正在处理一个表,如果它们超过两行,我需要向表行中显示的文本添加省略号。

使用来自 here 的解决方案

我现在已将其合并到表格单元格中,并使省略号行为正常工作。

然而,我也有一个粘性表格标题,以便在滚动表格行时将其保持在 View 中,但我发现应用了特殊省略号行为类的表格行在滚动时会渗透到标题内容中:

enter image description here

在这里工作演示 -> https://codepen.io/parky128-the-vuer/pen/vYYBQmJ

我已经追踪到 position: relative;multiLineEllipsis mixin 中的使用,因为我可以注释掉它并且行为没有发生,但后来我输了绝对定位的“...”内容的位置。

有没有一种方法可以保留混音的行为以及粘性表头?

谢谢

最佳答案

thz-index 值设置为比实际数据更高的值应该可以解决问题。演示:https://codepen.io/zeus2198/pen/xxxKmLY

关于html - 滚动时表格行内容渗入粘性标题内容 - 相对与绝对定位相关,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58234547/

相关文章:

css - 2 个 DIV 与 float :right 重叠

html - Twitter Bootstrap 悬停显示

html - 目前正在尝试将水平滚动添加到图片库的不同部分。只有达到窗口宽度后才垂直堆叠

JavaScript 按索引搜索表格

jquery - 每次悬停父菜单时,如何延迟子菜单? (前端)

html - 创建一个标题,下面有两条彩色线条

css - 为什么Fontin字体在浏览器上很锐利,但在PDF阅读器上却很流畅?

javascript - Twitter Bootstrap 工具提示数据选择器?

html - 将间隔列添加到 HTML 表格

javascript - 使用 JavaScript 更改行表颜色