How To Create a Table With Fixed Header and Scrollable Body?
Last Updated :
23 Jul, 2025
Here are the methods to create a table with a fixed header and a scrollable body.
Before proceeding, enhance your understanding by exploring this comprehensive guide on HTML tables.
1. Using position: sticky and overflow-y
This method employs position: sticky on the table header to keep it fixed at the top, while overflow-y: auto on the container enables vertical scrolling for the table body.
HTML
<html>
<head>
<style>
.table-container {
max-height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
thead th {
position: sticky;
top: 0;
background-color: #f1f1f1;
z-index: 1;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Topic</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>React Basics</td>
<td>Programming</td>
</tr>
<tr>
<td>Sarah</td>
<td>HTML Layouts</td>
<td>Web Design</td>
</tr>
<tr>
<td>Raj</td>
<td>CSS Flexbox</td>
<td>Frontend</td>
</tr>
<tr>
<td>Lisa</td>
<td>GeeksforGeeks Articles</td>
<td>SEO</td>
</tr>
<tr>
<td>Amit</td>
<td>React State Management</td>
<td>JavaScript</td>
</tr>
<tr>
<td>Emma</td>
<td>HTML Forms</td>
<td>Web Development</td>
</tr>
<tr>
<td>David</td>
<td>CSS Grid</td>
<td>Frontend</td>
</tr>
<tr>
<td>Anjali</td>
<td>React Hooks</td>
<td>Programming</td>
</tr>
<tr>
<td>Ali</td>
<td>JavaScript Fundamentals</td>
<td>Frontend</td>
</tr>
<tr>
<td>Mike</td>
<td>Responsive Design</td>
<td>Web Design</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
- The .table-container div sets a maximum height and enables vertical scrolling, ensuring the table body is scrollable.
- The thead th elements are styled with position: sticky and top: 0, keeping the header row fixed at the top during scrolling.
2. Using display: block for Table Sections
This approach sets display: block on the table's <thead> and <tbody> to allow independent scrolling of the body while keeping the header fixed.
HTML
<html>
<head>
<style>
.table-container {
max-height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
thead, tbody {
display: block;
}
thead {
background-color: #f1f1f1;
}
tbody {
max-height: 250px;
overflow-y: auto;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
width: 33%;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Name</th>
<th>Technology</th>
<th>Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>React</td>
<td>5 years</td>
</tr>
<tr>
<td>Anna</td>
<td>HTML</td>
<td>3 years</td>
</tr>
<tr>
<td>Mike</td>
<td>CSS</td>
<td>4 years</td>
</tr>
<tr>
<td>Sara</td>
<td>JavaScript</td>
<td>6 years</td>
</tr>
<tr>
<td>Raj</td>
<td>Frontend</td>
<td>2 years</td>
</tr>
<tr>
<td>Emily</td>
<td>React Native</td>
<td>1 year</td>
</tr>
<tr>
<td>Peter</td>
<td>Vue.js</td>
<td>2 years</td>
</tr>
<tr>
<td>Monica</td>
<td>Angular</td>
<td>4 years</td>
</tr>
<tr>
<td>Ali</td>
<td>JavaScript</td>
<td>5 years</td>
</tr>
<tr>
<td>Susan</td>
<td>GeeksforGeeks Writing</td>
<td>3 years</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
- Setting display: block on <thead> and <tbody> allows the table body to scroll independently from the header.
- The .table-container div provides a fixed height and enables vertical scrolling, ensuring the table body is scrollable while the header remains visible.
How to create a table with fixed header and scrollable body ?