How To

How To Fixed Table Header Using CSS

Here’s the simple CSS trick about the Fixed table header for a scrollable table. A fixed header makes table data effortless to understand. Designers often need to implement fixed headers for better and clear data table presentations.

Read Also: HTML Interview Questions and Answers for Experienced and Freshers

Index

Toggle

Fixed Table Header

There are two methods to create a fixed table header using CSS. Here we will learn both the techniques with meticulous details to implement a scrollable table with fixed header.

Method 1 – Fix Table Header Using Overflow Property

In this method, we are going to use overflow property in <tbody> tag with fixed height to freeze table header.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}

.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 100px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: black;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
}
</style>
</head>
<body>
<table class="fixed_header">
  <thead>
    <tr>
      <th>Data</th>
      <th>Data</th>
      <th>Data</th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Method 2 – Fix Table Header Using Display: Flex

In this method, we are going to use “display: flex” property in <table> and <tr> tags to make a scrolling table with fixed header.

<!DOCTYPE html>
<html>
<head>
<style>
table.flex-table {
  display: flex;
  flex-direction: column;
  height: 100%;
}
table.flex-table thead,
table.flex-table tbody {
  display: block;
}
table.flex-table thead {
  margin-right: 0px;
}
table.flex-table tbody {
  flex: 1;
  overflow-y: scroll;
}
table.flex-table tr {
  width: 100%;
  display: flex;
}
table.flex-table tr td,
table.flex-table tr th {
  display: block;
  flex: 1;
}
table.flex-widths.flex-table-aligned thead > tr {
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
</head>
<body>
<div style="height:200px;">
<table class="flex-table">
  <thead>
    <tr>
      <th>Data</th>
      <th>Data</th>
      <th>Data</th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
    <tr>
      <td>************</td>
      <td>------------</td>
      <td>++++++++++++</td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

Also read: Scroll to top of the page using jQuery

Conclusion

In this article, we have learned all the methods to make a scrollable table body with fixed table header. Also, both the methods are entirely based on pure CSS to make table headers fixed.

We can apply fixed table headers while listing a long data table in HTML. I hope now you can quickly implement tables with sticky table headers.

Enjoy Designing 🙂

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.