How to Create an HTML Table With a Sticky Header

HTML tables are still one of the most effective and accessible tools available for presenting structured data on a webpage. However, if you’re dealing with a large data set, standard tables quickly become hard to read, especially when users scroll down and lose sight of the column headers.

A sticky header can greatly improve usability in such cases by keeping the table’s header row fixed at the top of the scrollable area. As the user scrolls through the data, the header remains visible for easy reference. In this article, we’ll explore why sticky headers are important, where they’re most useful, and multiple ways to implement them using HTML, CSS, and JavaScript.

Note that “sticky header” is the most common term to refer to this table feature where the header row remains fixed. However, developers sometimes refer to this feature with different names, such as fixed table header, frozen header row, or persistent header.

When to Use Sticky Headers in HTML Tables

Sticky headers enhance the user experience when data is dense or tables span multiple screen lengths. Here are some common scenarios where sticky headers are particularly useful:

• Data Tables with Many Rows: Pricing tables, product inventories, order lists, and employee records. A sticky header ensures users always know what each column represents.
• Admin Dashboards and CMS Interfaces: Managing posts, users, orders, or analytics is easier with headers that remain visible.
• Mobile and Tablet Displays: Sticky headers reduce the need to scroll back and forth for column names on small screens.
• Financial or Statistical Reports: Headers stay in view to ensure clarity across metrics and categories.

Implementation Methods for Sticky Table Headers

1. Using CSS position: sticky (Recommended Method)

The position: sticky property was introduced as part of the CSS Positioning Module Level 3 around 2012 and gained solid browser support starting from around 2014–2017, making it widely usable in modern browsers today.

To make a table header sticky using this method, you apply position: sticky and set top: 0; so the header sticks to the top of its scroll container. However, you must also set background-color to ensure the header’s background covers content that scrolls underneath it; otherwise, text or cells behind it might show through. The z-index: 1; ensures the header stays above the table body rows visually, preventing the body content from overlapping or hiding the sticky header.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>$10</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

Make sure the appropriate CSS rules are applied.

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

Apply Sticky to Multiple Headers

If needed, you can apply sticky positioning to multiple rows to keep section headers visible as the user scrolls through grouped data. With a list created as a table with a single column or as a div you can make multiple elements of the list sticky. This technique can be used, for example, with alphabetized lists or lists with different categories of items.

Start by creating the table with one column, in this example I’ve included food categories and defined the header of each category with the category-header class:

<table>
  <tbody>
    <tr><td class="category-header">Fruits</td></tr>
    <tr><td>Apple</td></tr>
    <tr><td>Banana</td></tr>
    <tr><td>Cherry</td></tr>

    <tr><td class="category-header">Vegetables</td></tr>
    <tr><td>Carrot</td></tr>
    <tr><td>Spinach</td></tr>
    <tr><td>Broccoli</td></tr>

    <tr><td class="category-header">Dairy</td></tr>
    <tr><td>Milk</td></tr>
    <tr><td>Cheese</td></tr>
    <tr><td>Yogurt</td></tr>

    <tr><td class="category-header">Grains</td></tr>
    <tr><td>Bread</td></tr>
    <tr><td>Rice</td></tr>
    <tr><td>Pasta</td></tr>
  </tbody>
</table>

Then, with CSS apply the sticky header to the categories:

table {
    border-collapse: collapse;
    width: 300px;
    display: block;
    max-height: 300px;
    overflow-y: auto;
}

td, th {
    padding: 8px 12px;
    border: 1px solid #ccc;
}

.category-header {
    position: sticky;
    top: 0;
    background: #e0e0e0;
    font-weight: bold;
    z-index: 1;
}

Summary

Pros

• Simple to set up and use
• Works without relying on JavaScript
• Compatible with all major modern browsers (Chrome, Firefox, Edge, Safari)

Cons

• Inconsistent or no support in outdated browsers (e.g., Internet Explorer)

2. Split Table With Fixed Header

You can create a sticky header even without the position: sticky property value described in the previous section. This second technique involves using two tables, the first table on top is used to display the sticky header, the second table on the bottom is used to display the table content.

<div class="table-wrapper">
  <table class="table-header">
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
      </tr>
    </thead>
  </table>
  <div class="table-body-scroll">
    <table class="table-body">
      <tbody>
        <tr>
          <td>Widget A</td>
          <td>$10</td>
          <td>50</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Next, we should make the table used to display the table body scrollable using overflow-y: auto and configuring a max-height value.

.table-body-scroll {
  max-height: 300px;
  overflow-y: auto;
}

.table-header th,
.table-body td {
  width: 150px;
}

Important: When using the split table approach, the widths of each column in the fixed header table must match the widths of the corresponding columns in the scrollable body table. This syncing is not automatic and can be tricky to maintain, especially if the table content or layout changes dynamically. Failure to keep widths aligned will result in misaligned headers and content, confusing users and breaking the table’s appearance.

Summary

Pros

• Works in all browsers, including older ones
• Independent control of header and body scroll

Cons

• You must manually sync column widths
• Slightly more complex markup

3. CSS Grid-Based Table

This approach uses the CSS Grid layout module and offers full layout control, but should be avoided for data tables that require accessibility or semantic HTML.

<div class="grid-table">
  <div class="grid-header">Product</div>
  <div class="grid-header">Price</div>
  <div class="grid-header">Stock</div>
  <div class="grid-cell">Widget A</div>
  <div class="grid-cell">$10</div>
  <div class="grid-cell">50</div>
  <!-- More rows -->
</div>

Here you set the display property to grid in CSS.

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-height: 300px;
  overflow-y: auto;
}

.grid-header {
  position: sticky;
  top: 0;
  background: #fff;
  font-weight: bold;
}

Summary

Pros

• Full layout flexibility

Cons

• Non-semantic (bad for accessibility)

4. JavaScript Sticky Header

If, for any reason, your table is viewed on a browser that does not support the position: sticky property, consider using JavaScript libraries like DataTables or StickyTableHeaders to dynamically fix headers on scroll.

DataTables With Sticky Header Example

Here’s how you can create a sticky table header using DataTables. Start by creating an HTML table and assign an id to it.

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>$10</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>$15</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Next, add the necessary DataTables and JQuery assets in the head section of the document.

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css">

<!-- jQuery and DataTables JS -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>

Initialize DataTables and enable the sticky header using the fixedHeader parameter.

<script>
  $(document).ready(function () {
    var table = $('#example').DataTable({
      fixedHeader: true
    });
  });
</script>

Summary

Pros

• Reliable across all browsers
• Suitable for very complex tables

Cons

• Requires JavaScript
• Adds performance overhead

Alternative Solutions When Sticky Table Headers Can’t Be Implemented

Sometimes, implementing a sticky header on a table isn’t possible due to technical constraints or specific project requirements. In such cases, exploring other methods that can help maintain clarity and usability for large or complex data tables is essential. Below, we’ll cover practical alternatives that improve user experience without relying on sticky headers.

1. Repeat Headers Periodically

Repeat the header every N rows so users are reminded of the column meanings while scrolling.

<tr>
  <th>Product</th>
  <th>Price</th>
  <th>Stock</th>
</tr>
<tr>
  <td>Item A</td>
  <td>$10</td>
  <td>50</td>
</tr>
<!-- ... -->
<!-- Repeat header again after 10 rows -->
<tr>
  <th>Product</th>
  <th>Price</th>
  <th>Stock</th>
</tr>

This method is easy to implement and doesn’t require any JavaScript, making it a quick and straightforward way to improve usability in large tables. However, it introduces redundant markup, which can bloat the HTML and reduce semantic clarity, potentially impacting performance and accessibility, especially in more complex tables.

2. Use Card-Based Layout Instead of Tables

Instead of showing long tables, break rows into cards where each represents a data row.

<div class="card">
  <strong>Product:</strong> Widget A<br>
  <strong>Price:</strong> $10<br>
  <strong>Stock:</strong> 50
</div>

Using a card-based layout instead of traditional tables, each row is broken into individual cards, each of which displays the data for that row. This mobile-friendly approach offers a flexible design that adapts well to different screen sizes. However, it is less compact than tables and may not be ideal for displaying large data sets due to the increased space each card consumes.

3. Minimize Scrolling by Providing Filters

Provide sorting or filtering to reduce row count. By allowing users to filter data or sort it dynamically, you can minimize the need to scroll far.

Note that adding sorting or filtering reduces scrolling and improves user experience, but it usually requires JavaScript or plugins.

Create Sticky Table Headers Easily in WordPress

If you’re using WordPress and need an easy way to create advanced tables with features like sticky headers, consider the League Table plugin. It offers powerful options to build responsive and sortable tables, making it a great solution for WordPress users handling large or complex data sets.

Final Thoughts

Sticky headers significantly improve usability when working with large tables. The best implementation method depends on your content, layout requirements, and browser compatibility needs.

If you’re working within a restricted environment, practical alternatives like repeating headers or using cards can still offer value. However, if you’re building your project from scratch and have full control over the code, using the modern position: sticky property is the recommended and most efficient approach.