How to create a table fixed header and scrollable body with CSS?

Spread the love

Sometimes, we want to create a table fixed header and scrollable body with CSS.

In this article, we’ll look at how to create a table fixed header and scrollable body with CSS.

How to create a table fixed header and scrollable body with CSS?

To create a table fixed header and scrollable body with CSS, we set the thead element’s position to sticky.

For instance, we write

<div class="tableFixHead">
  <table>
    <thead>
      <tr>
        <th>TH 1</th>
        <th>TH 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A1</td>
        <td>A2</td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
      </tr>
      <tr>
        <td>C1</td>
        <td>C2</td>
      </tr>
      <tr>
        <td>D1</td>
        <td>D2</td>
      </tr>
      <tr>
        <td>E1</td>
        <td>E2</td>
      </tr>
    </tbody>
  </table>
</div>

to add a table.

Then we write

.tableFixHead {
  overflow: auto;
  height: 100px;
}
.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

to add position: sticky; to the th elements in the thead element to make the table header stick to the top.

And we set top to 0 to make it stay at the top.

Conclusion

To create a table fixed header and scrollable body with CSS, we set the thead element’s position to sticky.

Leave a Reply

Your email address will not be published.