How to make let a table’s body scroll but keep its head fixed in place with CSS?

Spread the love

Sometimes, we want to make let a table’s body scroll but keep its head fixed in place with CSS.

In this article, we’ll look at how to make let a table’s body scroll but keep its head fixed in place with CSS.

How to make let a table’s body scroll but keep its head fixed in place with CSS?

To make let a table’s body scroll but keep its head fixed in place with CSS, we set the overflow property.

For instance, we write

<style type="text/css">
  table {
    border-spacing: 0;
  }
  tbody {
    height: 4em;
    overflow-x: hidden;
    overflow-y: auto;
  }
  td {
    border-left: 1px solid blue;
    border-bottom: 1px solid blue;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Footer</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Cell 1</td>
    </tr>
    <tr>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 5</td>
    </tr>
    <tr>
      <td>Cell 6</td>
    </tr>
    <tr>
      <td>Cell 7</td>
    </tr>
    <tr>
      <td>Cell 8</td>
    </tr>
  </tbody>
</table>

to add a table with some styles.

We add border-spacing: 0; with overflow-y: auto; to let us scroll vertically.

Conclusion

To make let a table’s body scroll but keep its head fixed in place with CSS, we set the overflow property.

Leave a Reply

Your email address will not be published.