HTML Table with fixed Thead and vertical scrollable Tbody — Logical implementation using CSS grid

3 min readMay 11, 2021

In this post, I am going to describe how to implement HTML Table with fixed Thead and scrollable Tbody using CSS grid.

Let's first understand CSS grid layout.

CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to layout major page areas or small user interface elements.

For example- We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

HTML

<body class="grid-layout">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</body>

CSS

.grid-layout{
  display: grid;
}
.grid-layout > div{
  border: 1px solid black
}

In the above example, All the direct children of “class=grid-layout” are now grid items.

Now let’s use the CSS grid to implement HTML Table with fixed Thead and vertical scrollable Tbody.

Example HTML code which has 5 columns and 7 data rows.

HTML

<table>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1-0</td>
      <td>row 1-1</td>
      <td>row 1-2</td>
      <td>row 1-3</td>
      <td>row 1-4</td>
    </tr>
    <tr>
      <td>row 2-0</td>
      <td>row 2-1</td>
      <td>row 2-2</td>
      <td>row 2-3</td>
      <td>row 2-4</td>
    </tr>
    <tr>
      <td>row 3-0</td>
      <td>row 3-1</td>
      <td>row 3-2</td>
      <td>row 3-3</td>
      <td>row 3-4</td>
    </tr>
    <tr>
      <td>row 4-0</td>
      <td>row 4-1</td>
      <td>row 4-2</td>
      <td>row 4-3</td>
      <td>row 4-4</td>
    </tr>
    <tr>
      <td>row 5-0</td>
      <td>row 5-1</td>
      <td>row 5-2</td>
      <td>row 5-3</td>
      <td>row 5-4</td>
    </tr>
    <tr>
      <td>row 6-0</td>
      <td>row 6-1</td>
      <td>row 6-2</td>
      <td>row 6-3</td>
      <td>row 6-4</td>
    </tr>
    <tr>
      <td>row 7-0</td>
      <td>row 7-1</td>
      <td>row 7-2</td>
      <td>row 7-3</td>
      <td>row 7-4</td>
    </tr>
  </tbody>
</table>

1. First style <table> element with grid-layout structure by giving it display: grid style property. Immediate child items<thead> and <tbody> will now be considered grid items.

2. Now align table immediate child items in one column using grid-template-columns: 1fr and in two rows using grid-template-rows: 1.25rem 1fr.

3. <thead> will have 1.25rem as height and <tbody> will take rest available space with in <table>.

4. Now let’s align all <th> and <td> as grid items. To do this, we need to set its immediate parent container as a grid. We will do this by applying display: grid for <tr>.

5. Now let’s divide the grid into 5 equal-width columns using grid-template-columns: repeat(5, 1fr) property. Depending on our usecase, we can give each column specific width as well using grid-template-columns: 100px 200px 300px 400px 500px.

6. Now to make tbody vertical scrollable — we need to ensure it has overflow-y property set to auto and height is set to 100% to take available table height.

CSS

table{
  display: grid;
  grid-template-rows: 1.25rem 1fr; //1.25rem header height,1fr tbody
  grid-template-columns: 1fr;
  height: 150px
}tbody{
  height: 100%;
  overflow: auto;
}tr{
  display: grid;
  grid-template-columns: repeat(5, 1fr)
}td, th{
  border-top: 1px solid grey;
}th{
  background: #F74B33;
  color: white
}

Thanks for taking the time to read this post. I hope you find it helpful

HTML Table with fixed Thead and vertical scrollable Tbody — Logical implementation using CSS grid

HTML

CSS

CSS

Written by Anubhav