May 11, 2024 | HTML
Hello Dev,
"Often, you may need to create a scrollable table with a fixed header for your website or project. This can be done quite easily. I'll show you two examples of scrolling tables with fixed headers that you can view and implement on your website. Let's start with the first example."
To create a scrolling table with a fixed header, you can use CSS to achieve this effect. The key is to use the position: sticky; property on the table header (thead) and ensure that the table has a defined height and overflow set to auto or scroll. Here's a simple example to illustrate how you can implement this:
Read Also: Bootstrap Dynamic Autocomplete search using Typeahead JS Example Tutorial index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Table with Fixed Header Html Example Tutorial -- ItErrorSolution.com</title>
<link rel="stylesheet" href="style.css">
<style>
.scrollable-table {
width: 100%;
border-collapse: collapse;
}
.scrollable-table th,
.scrollable-table td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.scrollable-table thead th {
position: sticky;
top: 0;
background-color: white;
z-index: 10;
}
.scrollable-table tbody tr {
display: block;
}
.scrollable-table tbody tr:nth-of-type(odd) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Scrolling Table with Fixed Header Html Example Tutorial -- ItErrorSolution.com</h1>
<table class="scrollable-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<!-- Add your table rows here -->
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
</body>
</html>
In this example, the table header (thead) is made sticky using position: sticky; along with top: 0; to ensure it sticks to the top of the viewport. The z-index: 10; ensures that the header stays above other content if needed. The table body (tbody) is styled to display its rows as blocks, allowing the table to scroll properly while keeping the header fixed.
This approach works well for tables where the content does not exceed the viewport height. If your table content is very long, you might need to adjust the styling to ensure the table scrolls smoothly and the header remains fixed.
Output:
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"