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.

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. In addition, 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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
c++ interview questions
Top 25 C++ Interview Questions for Experienced (Download Free PDF)

Here we have explained the most popular C++ interview questions and answers for experienced and freshers. C++ also is called...

Close