I'm working on a table with a sticky header, and I've noticed an issue when I scroll down: the rows show through the header. To fix this, I set the header's background color to match the container's background, which is straightforward. However, I want my table to be reusable regardless of the surrounding context. If the table is within a container that has a different background, I need to adjust the header color accordingly. I initially thought about setting the header to inherit its background color, but I realized it would inherit from the parent container, which defaults to transparent.
Then I found a workaround: setting the background of the `html` element to gray and using `* { background-color: inherit; }`. This way, the background cascades down through to my table header. It works in most cases since elements are transparent by default. However, I noticed that if I use a styled button, it loses the default button color. I'm curious if there are any other potential downsides to this approach that I might not be aware of.
1 Answer
You could actually solve this with CSS variables instead. Just create a variable on the main section and apply it to the body. This way, you can control the background color without messing with default styles.
Could you give a bit more detail on how that works? I'm a bit confused about the implementation.