HtmlHow-ToBeginner · 3 min read

How to Create Table with Fixed Header in HTML Easily

To create a table with a fixed header in HTML, use thead for the header and apply CSS styles like position: sticky; and top: 0; to the th elements. This keeps the header visible while scrolling the table body.

📐

Syntax

Use the <table> element with a <thead> for the header and <tbody> for the body. Apply CSS position: sticky; and top: 0; to th inside thead to fix the header at the top when scrolling.

<thead>: Defines the table header.
<tbody>: Contains the table rows.
position: sticky;: Keeps the header fixed relative to its container.
top: 0;: Positions the sticky header at the top.

html

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

💻

Example

This example shows a scrollable table with a fixed header. The header stays visible while you scroll the table body.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fixed Header Table Example</title>
<style>
  .table-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    text-align: left;
  }
  thead th {
    position: sticky;
    top: 0;
    background-color: #f8f8f8;
    z-index: 1;
  }
</style>
</head>
<body>
<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Alice</td><td>30</td><td>New York</td></tr>
      <tr><td>Bob</td><td>25</td><td>Los Angeles</td></tr>
      <tr><td>Charlie</td><td>35</td><td>Chicago</td></tr>
      <tr><td>Diana</td><td>28</td><td>Houston</td></tr>
      <tr><td>Edward</td><td>40</td><td>Phoenix</td></tr>
      <tr><td>Fiona</td><td>32</td><td>Philadelphia</td></tr>
      <tr><td>George</td><td>29</td><td>San Antonio</td></tr>
      <tr><td>Hannah</td><td>27</td><td>San Diego</td></tr>
      <tr><td>Ian</td><td>31</td><td>Dallas</td></tr>
      <tr><td>Jane</td><td>26</td><td>San Jose</td></tr>
    </tbody>
  </table>
</div>
</body>
</html>

Output

A scrollable table with a header row that stays visible at the top while scrolling the table body.

⚠️

Common Pitfalls

Common mistakes include:

Not setting position: sticky; on th elements, so the header does not stick.
Forgetting to set a height and overflow-y: auto; on the container, so scrolling does not happen.
Using position: fixed; instead of sticky, which removes the header from the table flow.
Not setting a background color on the header, causing content behind to show through when scrolling.

css

<!-- Wrong: No sticky position -->
<style>
  thead th {
    /* position: sticky; missing */
    top: 0;
  }
</style>

<!-- Right: Sticky position with background -->
<style>
  thead th {
    position: sticky;
    top: 0;
    background-color: white;
  }
</style>

📊

Quick Reference

Property	Purpose	Example Value
position	Makes header sticky	sticky
top	Distance from top when sticky	0
overflow-y	Enables vertical scroll	auto
max-height	Limits container height	200px
background-color	Prevents transparency	#f8f8f8

✅

Key Takeaways

Use position: sticky; and top: 0; on th to fix table headers.

Wrap the table in a container with fixed height and overflow-y: auto; to enable scrolling.

Always set a background color on sticky headers to avoid transparency issues.

Avoid using position: fixed; for table headers as it breaks table layout.

Use semantic HTML with thead and tbody for better structure and accessibility.