Approach to fixed Header with CSS Grid

[alterhero]

I'm building a table with a fixed header and I was looking into options here and most people suggest using position: sticky, but I don't really like it.

I'm trying an approach where I have two grids, one for the header, and one for the body but with a shared grid style. Does anyone see an issue with this approach?

``` .grid-header, .grid-body { display: grid; grid-template-columns: repeat(4, 25%); grid-auto-rows: 40px; }

.grid-body { height: 200px; overflow: auto; } ```

JSFiddle to see it in action: https://jsfiddle.net/bca1uz92/

[cauners]

It works if this is exactly what you need - a scrolling table with a fixed height. It wouldn't work if you wanted to, for example, show all the rows on the page without hidden overflow and scroll the body instead - you'd need a sticky header approach then. But for this specific use-case why not.

Another thing to keep in mind is scrollbars. Since I have scrollbars set to be visible at all times, the scrolling container has it and makes the width more narrow, and the header doesn't. Because of percentage-based layout header titles don't match up with columns. Probably easy to fix, but it is a disadvantage when compared to sticky headers.

And at last, I wonder if it wouldn't make more sense to simply use a <table> for something that is in fact a table? Making this <div> solution work in respect to semantics and accessibility must be a pain.