Inputs.table header opacity glitch when using custom format

[oluckyman]

When I use custom format with HTML that have opacity, the cell content appears above the table header.
See example notebook:

It's not a big deal for prototyping and exploring. But I love Inptuts.table and am using it a lot, including for presenting to users custom tables like this

[mbostock]

We could fix this by adding a z-index: 1; here:

inputs/src/style.css

Lines 274 to 279 in 3281a4a

	.__ns__-table thead th {
	position: sticky;
	top: 0;
	background: white;
	cursor: ns-resize;
	}

[oluckyman]

Thank you for the quick response!

I am curious is it a known browser bug? Don't understand why normal content renders just fine and the semi-transparent content appears above 🤔

[mbostock]

@oluckyman Here’s a result I found on stacking contexts if you want to learn about this behavior: https://www.oreilly.com/library/view/developing-web-components/9781491905685/ch04.html

[oluckyman]

Thanks Mike, it was helpful! 🙌

If someone curious too, this peace was missing in my mental model:

A stacking context is created when an element is positioned and assigned a z-index value other than auto, or when an element has an opacity value less than 1

So by setting opacity to the cell of the table I made it compete with the stacking context of the header, which has position: sticky.

Knowing this I fixed the glitch by setting position: relative; z-index: -1 to my custom HTML in table cells.

Added the workaround to the notebook: