CODEWITHSUNDEEP
csshtml-tablesticky
Brenden
Brenden

Reputation: 329

How to have multiple <tr> elements sticky at once on a table

I am working on a tool that has a lot of very long tables. Some of these tables have multiple rows inside the <thead>, and I would like to have all of them be position: sticky at once. However, I cannot find a way to do this.

I tried adding position: sticky to the th, like so:

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

I also tried adding position: sticky to the entire thead, but it seems that there's a bug in Chromium that prevents this from working.

I am trying to achieve something like this: img

Where both of the top two rows are kept sticky when the user scrolls past.

Is there a way to do this that works in both Chrome and Firefox? I do not need to support IE.

Upvotes: 2

Views: 865

Answers (1)

Mark Fisher
Mark Fisher

Reputation: 1257

If all the <tr> elements will have the same height, say 20px, then you could try something like

thead tr th {
    position: sticky;
}

thead tr:nth-of-type(1) th {
    top: 0;
}

thead tr:nth-of-type(2) th {
    top: 20px;
}

thead tr:nth-of-type(3) th {
    top: 40px;
}

Upvotes: 1

Related Questions