How To – Fixed Table Header Using CSS

Here’s the simple CSS trick to Fix table header for the scroll-able table. This makes very easy to understand the data in data-table.

There are two methods to create a fixed table header using CSS.

Method 1 – Using Overflow Property

In this method, we are going to use overflow property in <tbody> tag with fix height.

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 – Using Display: Flex

In this method, we are going to use “display: flex” property in <table> and <tr> tags.

<!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

Leave a Reply

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