Sticky table header | Community
Skip to main content

Sticky table header

  • February 14, 2022
  • 1 reply
  • 0 views
Steven22

I'm trying to create a sticky header (and possibly sticky columns later on) on a table for one of my articles. Added some position: sticky to my css along with some few others but haven't been able to get it to work.

Link to article with the tables that I want to have sticky headers: https://support.hackerrank.com/hc/en-us/articles/1500002392722--Execution-Environment-and-Samples

There should be two tables on that page, under "Coding and Database" and "Front-end, Back-end, Full stack, Data Science and DevOps".

 

The tables were setup using Zendesk's table creator.

    1 reply

    Ifra
    • Ifra
    • February 15, 2022

    Hi Steven,

    Add the below CSS code at the end of your stylesheet.

    .table {
        display: table;
        position: relative;
        border-collapse: collapse;
    }

    .table th {
        position: sticky;
        top: 0;
    }

     

    You table header wrapped inside <td> so you need to update that tag <td> to <th>.

     

    You can try this and if any issue, do let me know :)

    Thank You

    Team

    Terms & ConditionsCookie settingsAccessibility statement