HTML Tables With Sticky Header

HTML tables with sticky header and footer make a tall data grid more visually appealing. Printers automatically place headers and footers on each page if the HTML table spans more pages.

CSS Code

Making sticky HTML table headers is easy but it's far from how you would expect to make it. I would assume to assign position: relative to the table tag and position: fixed; top:0; to the thead tag. This approach hovewer isn't working.

How to do it correctly?

What we have to do is assign the position:sticky;top:0; styles to the thhead tag, just like in the example below where a tall table is wrapped in a div container with a limited height. We can assign these styles to the th tags instead but that doesn't make too much sense.

.stickyTable thead {
  position: sticky;
  top: 0;
}

<div style="height: 300px;overflow: auto;">
  <table class="stickyTable demo">
    <thead>
      <tr>
        <th>Color</th><th>Name</th>
        <th>HEX</th><th>RGB</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span style="background: #F0F8FF;">
                  </span></td>
        <td>AliceBlue</td><td>#F0F8FF</td>
        <td>rgb(240,248,255)</td>
      </tr>
      <tr>
        <td><span style="background: #FAEBD7;">
                  </span></td>
        <td>AntiqueWhite</td><td>#FAEBD7</td>
        <td>rgb(250,235,215)</td>
      </tr>
      <!-- many more rows... -->
    </tbody>
  </table>
</div>

Sticky Header and Footer

Implementing a HTML table with a sticky footer is also easy and doesn't require the use of JavaScript.

We need to assign the position: sticky; bottom: 0; styles to the tfoot tag. The example below has both a sticky header and footer:

.stickyTable thead, .stickyTable tfoot {
  position: sticky;
  top: 0;
 }
.stickyTable tfoot {
  bottom: 0;
}
.wrapstickyTable {
  height: 300px;
  overflow: auto;
}

<div class="wrapstickyTable">
  <table class="stickyTable">
    <thead>
      <tr><th>Nr.</th><th>Car</th><th>Sold</th></tr>
    </thead>
    <tbody>
      <tr><td>1.</td><td>Ford F-Series</td><td>653,957</td></tr>
        <!-- more entries here -->
      <tr><td>25.</td><td>Honda Civic</td><td>133,932</td></tr>
    </tbody>
    <tfoot>
      <tr><td></td><td>Make, model</td><td>6,128,571</td></tr>
    </tfoot>
  </table>
</div>

Div Tables With Sticky Header and Footer

Div tags are not suitable for building tables with sticky header and footer. A position:absolute header would detach from the rest of the cells and the columns would stop being aligned.

The example below has a header with cells automatically set to width:33%, below that comes the scrolling container with height: 300px; overflow: auto; with the high table inside. The header is aligned with the cells because they are both fixed width.

Generate HTML Tables With Sticky Header and Footer

Create HTML tables with the generator below and use one of the methods listed in this article to add a sticky header.