- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Tables with Fixed Header on Scroll in CSS
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 −
<!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
<!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 −
Published on 12-Mar-2021 10:47:08
- Related Questions & Answers
- How to create a fixed/sticky header on scroll with CSS and JavaScript?
- How to shrink a header on scroll with CSS and JavaScript?
- How to Create an On Scroll Fixed Navigation Bar with CSS?
- How to change background images on scroll with CSS?
- Fixed Positioning with CSS
- Disabling Scroll Anchoring with CSS
- How to create a gradient background color on scroll with CSS?
- Styling Tables with CSS
- CSS overflow: scroll
- How to resize a navigation bar on scroll with CSS and JavaScript?
- Styling Tables Working with CSS
- Set a fixed element and scroll another - jQuery
- How to style a header with CSS?
- CSS position: fixed;
- How to slide down a navigation bar on scroll with CSS and JavaScript?
Advertisements