HTML Tables with Fixed Header on Scroll in CSS


Create a fixed header on scroll in HTML tables using the position property with the value sticky and top property 0. Set both these properties for the header i.e., the <th> element. We will see two examples to set fixed headers on scroll, one using flex and another without using the flex concept.

Create a fixed header on scroll using flex

The following example give us an idea to create a fixed header on scroll with flex −

Set the container for the table

A container div is included and within that the table is set using the <table>. The flex is set using the display property. The overflo-y is set to scroll. The content is clipped and a scroller is provided −

div {
   color: white;
   display: flex;
   padding: 2%;
   background-color: rgba(190,155,150);
   height: 135px;
   overflow-y: scroll;
}

Fixed header

The header is set fixed using the position property with the value sticky. The top property is also set to 0. These are applied on the <th> element i.e., the header −

th {
   top: 0;
   position: sticky;
   background: #e5d2f1;
   color: black;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         color: white;
         display: flex;
         padding: 2%;
         background-color: rgba(190,155,150);
         height: 135px;
         overflow-y: scroll;
      }
      td,th,p {
         text-align: center;
         font-size: 1.25em;
      }
      table {
         padding: 3%;
         border-collapse: collapse;
         border: 2px ridge green;
      }
      th {
         top: 0;
         position: sticky;
         background: #e5d2f1;
         color: black;
      }
   </style>
</head>
<body>
   <div>
      <table>
         <thead>
            <tr>
               <th>A</th>
               <th>B</th>
               <th>C</th>
               <th>D</th>
               <th>E</th>
            </tr>
         </thead>
         <tr>
            <td>Hey</td>
            <td>Hey</td>
            <td>Hey</td>
            <td>Hey</td>
            <td>Hey</td>
         </tr>
         <tr>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
         </tr>
         <tr>
            <td>Yo</td>
            <td>Yo</td>
            <td>Yo</td>
            <td>Yo</td>
            <td>Yo</td>
         </tr>
         <tr>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
         </tr>
      </table>
      <p>Duis tincidunt fermentum ipsum vel sagittis. Sed ultrices quis dui ut rutrum. Quisque et varius tellus, ut vestibulum purus. Etiam in erat fringilla, laoreet libero eu, facilisis ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eu ornare augue, ut facilisis odio.</p>
   </div>
</body>
</html>

Create a fixed header on scroll without using flex

The following example give us an idea to create a fixed header on scroll without using flex −

Set the container for the table

A container div is included and within that the table is set using the <table>. The flex is set using the display property. The overflow-y is set to scroll. The content is clipped and a scroller is provided −

div {
   padding: 2%;
   height: 40px;
   overflow-y: scroll;
   box-shadow: inset 0 0 12px lightgreen;
}

Fixed header

The header is set fixed using the position property with the value sticky. The top property is also set to 0. These are applied on the element i.e., the header −

th {
   top: 0;
   position: sticky;
   background: white;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         padding: 2%;
         height: 40px;
         overflow-y: scroll;
         box-shadow: inset 0 0 12px lightgreen;
      }
      tr th {
         background: #25f2f1;
      }
      table {
         text-align: center;
         position: relative;
         border-collapse: separated;
         width: 100%;
      }
      th {
         top: 0;
         position: sticky;
         background: white;
      }
   </style>
</head>
<body>
   <div>
      <table>
         <thead>
            <tr>
               <th>A</th>
               <th>B</th>
               <th>C</th>
               <th>D</th>
               <th>E</th>
            </tr>
         </thead>
         <tr>
            <td>Hey</td>
            <td>Hey</td>
            <td>Hey</td>
            <td>Hey</td>
            <td>Hey</td>
         </tr>
         <tr>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
         </tr>
         <tr>
            <td>Yo</td>
            <td>Yo</td>
            <td>Yo</td>
            <td>Yo</td>
            <td>Yo</td>
         </tr>
         <tr>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
            <td>Demo</td>
         </tr>
      </table>
   </div>
</body>
</html>

Updated on: 21-Dec-2023

20K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements