Fixed table titles



  • 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.


  • Moderator

    @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;
    }
    


  • @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 ?


  • Moderator

    @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!



  • 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.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.