Fixed table titles

[Kaosce]

An option (on right click) to make tu titles of an HTML table fixed so we can scroll down the page while keeping the titles.

[LonM]

@Kaosce that's an interesting request. I wonder if it could be implemented as a page action with just css...

Update: It can indeed be done. If the vivaldi developers include this page action, users could make any <table> they wanted have sticky headers:

table > tbody > tr:nth-child(1) > th,
table > tr:nth-child(1) > th {
    position: sticky;
    top: 0;
}

[Kaosce]

@LonM said in Fixed table titles:

position: sticky;
top: 0;

We should probably add a z-index to make sure they stay on top. But then what about navbar ?

[LonM]

@Kaosce I haven't come across enough wild <tables> it to imagine edge cases very well. Please do hack away at the suggested code to find something that works all the time!

[Kaosce]

The best way I found was this :

table > tbody > tr:nth-child(1) > th,
table > tr:nth-child(1) > th {
    position: sticky;
    top: --navbar-height;
    background: inherit;
}

But the --navbar-height has to be replaced with the actual height of the navbar. I don't really know how to do this without the need of js but if we use it :

const everyElement = [...document.querySelectorAll('body *')];
const everyElementDisplayed = everyElement.filter(element => element.offsetParent); // According to https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
const everyElementDisplayedWithZIndex = everyElementDisplayed.filter(element => !isNaN(parseInt(getComputedStyle(element).zIndex)))
const topLevelElement = everyElementDisplayedWithZIndex.sort(element => getComputedStyle(element).zIndex).pop();

PS : Variables name are just for comprehension. You can chain the calls if not needed.

PS2: Thanks to https://stackoverflow.com/a/63698925/11508323 for the main idea.

Edit: I only tested it on https://www.w3schools.com/html/html_tables.asp because they have both a navbar and tables.

[LonM]

Thank you for your request. As this post has had less than 5 votes over 4 years it will now be archived. You can make a new request if you feel it is still needed in the browser.Thank you for your request. As this post has had less than 5 votes over 4 years it will now be archived. You can make a new request if you feel it is still needed in the browser.