Search code examples
cssgrid-layout

Is it possible to use grid layout to make a table with frozen/fixed header

The fact that grid layout allows me to build a table in CSS in a completely different way, I was trying to figure out a way to make a grid layout where the first row stays in view, whilst the rest scroll. Importantly without losing the grid behavior (a 'cell' with a lot of content should change the width and/or height of the entire column and/or row including the unscrollable first row).

Is this possible?

Solution

  • I recently came upon this codepen from @Nicolas CHEVOBBE:

    https://codepen.io/nchevobbe/pen/bYZEqq?editors=0110

    It shows an example of what you describe. Fixed header row using grid layout. It's quite simple for a feature that takes a lot of effort to code otherwise.

    The essential part is using position sticky on header cells:

    [role=columnheader] {
  background-color: #F9F9FA;
  position: sticky;
  top: 0;
  padding: 5px;
  border-bottom: 1px solid #E3E4E4;
}

    Hope it helps.