table with sticky header and horizontal scroll

Question

I want a table with sticky header and horizontal scroll.

I dont want a vertical scroll inside the table. It should scroll with the page. So no set height of the table. Is this even possible?

Here is codepen of not working example: https://codepen.io/fwitkowski/pen/zYEQvvg

When I remove overflow: auto from table-container, position sticky works just fine.

.table-container {
  max-width:350px;
  overflow-x:auto; /* for horizontal scroll */
  position: relative; /* relative to the normal flow */
  border: solid 5px red /* for reference */
}

score 12 · Accepted Answer · answered Jan 19 '22 at 14:48

12

As per the MDN documentation:

a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

There's an active GitHub issue discussing this on the W3C repo, which has been running since 2017. There have been various workarounds suggested, but they all seem to rely on adding a fixed height to the table / table container, or using Javascript as in this answer.

At least for the moment, this is not something that's supported natively.

answered Jan 19 '22 at 14:48

Richard Deeming

29,830
10
79
151

I think this is right (unfortunatelly) I will go with max height and have scrollbars for both table container (X and Y) – Filip Witkowski Jan 19 '22 at 15:51
Is there a JS solution that can get around this? Seems crazy if not! – Dan Jul 12 '22 at 13:51
@Dan I linked to one in my answer. :) – Richard Deeming Jul 12 '22 at 16:06

table with sticky header and horizontal scroll

1 Answers1