HTML Tables with Fixed Header on Scroll in CSS

CSSWeb DevelopmentFront End Technology

By setting postion: sticky and top: 0, we can create a fixed header on a scroll in HTML tables.

Example

The following examples give us an idea of how to implement this −

 Live Demo

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

Output

This will produce the following result −

Example

 Live Demo

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

Output

This will produce the following result −

raja
Published on 12-Mar-2021 10:47:08
Advertisements