How to Create a Table with a Fixed Header and Scrollable Body

Tables are a fundamental element in web development, especially when dealing with large datasets.

However, when a table has many rows, scrolling through them can be cumbersome. To improve the user experience, it’s common to fix the table header while allowing the body to scroll.

This ensures that the header remains visible, making it easier to keep track of column titles as users scroll through the data.

In this blog post, we’ll explore how to create a table with a fixed header and a scrollable body using HTML and CSS.

HTML Structure

Let’s start with the basic HTML structure for a table:

<body>
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

This structure includes a table element with thead for the header and tbody for the table body. The table is wrapped in a div container that will handle the scrolling.

CSS Styling

To make the header fixed and the body scrollable, we’ll use a combination of CSS properties like position, overflow, and max-height.

Here’s the CSS:

.table-container {
  max-height: 400px; 
  overflow-y: auto; 
  border: 1px solid #ddd; 
}

table {
  width: 100%;
  border-collapse: collapse; /* Ensure borders collapse into a single border */


}

thead {
  position: sticky;
  top: 0;
  background-color: #f9f9f9; 
  z-index: 10; 
}

th,
td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd; 
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2; 
}

Key Points:

.table-container: The div container is given a max-height, which sets the maximum height of the table. The overflow-y: auto property allows the table body to scroll vertically.

thead: The header row is made sticky using position: sticky; top: 0;. This fixes the header at the top of the table when scrolling.

z-index: We add a z-index to the thead to ensure it stays above the table body content as the user scrolls.

Output:

See the Pen How to make table header fixed while scrolling by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

Enhancing User Experience

Performance Considerations

For tables with a massive number of rows, even with a fixed header, performance might degrade. Consider implementing pagination or lazy loading to handle large datasets more efficiently.

Accessibility

When creating scrollable tables, ensure that the experience is accessible for all users. Use proper ARIA roles and labels to help screen readers understand the table structure.

For example, using role="table", role="row", and role="columnheader" can make the table more accessible.

<thead role="rowgroup">
  <tr role="row">
    <th role="columnheader">Column 1</th>
    <th role="columnheader">Column 2</th>
    <th role="columnheader">Column 3</th>
    <th role="columnheader">Column 4</th>
  </tr>
</thead>

Conclusion

Creating a table with a fixed header and scrollable body is a simple yet powerful way to improve the usability of your tables, especially when dealing with large datasets.

By using the CSS position: sticky property, you can keep your headers visible, ensuring that users always know what each column represents as they scroll.

Try implementing this in your next project and see how it enhances your data presentation!