Search code examples
htmlcsshtml-tableellipsis

Table row content bleeding into sticky header content when scrolling - relative vs absolute positioning related

I am working on a table where I need to add ellipsis to text displayed in table rows if they exceed two lines.

Using a solution from here

I have now incorporated this into table cells, and have the ellipsis behaviour working.

However I also have a sticky table header to keep it in view whilst scrolling the table rows, but I am finding the table rows that have the special ellipsis behaviour class applied are bleeding through into the header content when scrolling:

enter image description here

Working demo here -> https://codepen.io/parky128-the-vuer/pen/vYYBQmJ

I have tracked this down to the usage of position: relative; in the multiLineEllipsis mixin since I can comment this out and the behaviour doesnt happen, but then I lose the placement of the '...' content which is being absolute positioned.

Is there a way I can preserve the behaviour of the mixin along with a sticky table header?

Thanks

Solution

  • Setting th's z-index value to a higher value than the actual data should solve the problem. Demo: https://codepen.io/zeus2198/pen/xxxKmLY