Here is how to create a Table with Sticky Header and Scrollable Body
Step 1: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Sticky Header and Scrollable Body</title>
<meta name="description" content="Learn how to create an HTML table with a sticky header and a scrollable body using CSS. Includes example code and explanation.">
<meta name="keywords" content="HTML table, sticky header, scrollable table, CSS table, fixed header">
</head>
<body>
<h2 style="text-align: center;">Table with Sticky Header</h2>
<div class="table-container">
<div class="table-wrapper">
<table class="scrollable-table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>John Doe</td><td>[email protected]</td><td>USA</td></tr>
<tr><td>2</td><td>Jane Smith</td><td>[email protected]</td><td>UK</td></tr>
<tr><td>3</td><td>Michael Brown</td><td>[email protected]</td><td>Canada</td></tr>
<tr><td>4</td><td>Emily White</td><td>[email protected]</td><td>Australia</td></tr>
<tr><td>5</td><td>David Wilson</td><td>[email protected]</td><td>Germany</td></tr>
<tr><td>6</td><td>Emma Johnson</td><td>[email protected]</td><td>France</td></tr>
<tr><td>7</td><td>James Miller</td><td>[email protected]</td><td>Italy</td></tr>
<tr><td>8</td><td>Sarah Lee</td><td>[email protected]</td><td>Spain</td></tr>
<tr><td>9</td><td>Chris Green</td><td>[email protected]</td><td>India</td></tr>
<tr><td>10</td><td>Olivia Harris</td><td>[email protected]</td><td>Brazil</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Step 2: CSS Code
body {
font-family: Arial, sans-serif;
margin: 50px;
background-color: #f8f9fa;
}
.table-container {
max-width: 600px;
margin: auto;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.scrollable-table {
width: 100%;
border-collapse: collapse;
}
.scrollable-table thead {
background: #007bff;
color: white;
position: sticky;
top: 0;
}
.scrollable-table th, .scrollable-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.table-wrapper {
max-height: 300px;
overflow-y: auto;
display: block;
}
.scrollable-table tbody tr:nth-child(even) {
background: #f2f2f2;
}
