HTML

Fixed Table Header Using HTML

Today, we will learn about how we can fix the table header using HTML. We sometime needs fix table header when we have lots of data in table. We can achieve this functionality by simple CSS styles.

You can use the following CSS for making the table with fixed header.

<!DOCTYPE html>
<html>
<head>
  <title>Fixed table header in HTML</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style type="text/css">
    body .custom-ui-table, body .custom-ui-table tr {
      height: unset;
    }

    body .custom-ui-table {
      margin-bottom: 0;
    }

    body .custom-ui-table tbody, body .custom-ui-table thead {
      display: block;
    }

    body .custom-ui-table tbody {
      max-height: 360px;
      overflow: auto;
      width: 100%;
    }

    body .custom-ui-table thead tr th {
      background: #F2F4F6;
      font-size: 12px;
      color: #032949;
      font-weight: 500;
      border: none;
    }

    body .custom-ui-table tbody tr td {
      border: none;
      border-bottom: 1px solid #F2F4F6;
      vertical-align: middle;
      font-size: 12px;
      color: #032949;
      font-weight: normal;
      line-height: unset ;
      text-align: left;
    }

    body .custom-ui-table tbody {
      position: static;
      height: unset;
      width: 100%;
    }

    body .custom-ui-table .geekmark {
      top: 50%;
    }

    body .custom-ui-table .form-control {
      font-size: 11px;
      color: #032949;
      border-radius: 2px;
      font-family: Roboto;
      font-weight: normal;
      display: inline-block;
      border: 1px solid #032949;
      padding: 2px 10px;
      height: 28px;
    }

    body .custom-ui-table tr {
      width: 100%;
      display: inline-table;
      height: 50px;
      table-layout: fixed;
    }
  </style>
</head>
<body>
  <h2>Fixed Table Header Using HTML</h2>
  <table class="table custom-ui-table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody style="max-height: 200px;">
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
      <tr>
        <td>Test First Name</td>
        <td>Test Last Name</td>
        <td>test@gmail.com</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

You just need to give the class custom-ui-table to table and put the following CSS in your HTML file.

That’s it. I hope you guys enjoyed the blog.