Table With Sticky Header

<!DOCTYPE html>
<title>My Example</title>

.sticky-header-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* This allows the th to stick relative to the table */
    position: relative;
}

/* 2. The header cells (th) are what become sticky */
.sticky-header-table thead th {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Stick to the top of the container */
    z-index: 10; /* Ensure the header stays on top of the scrolling content */

/* -- Standard header styling -- */
    padding: 12px 15px;
    background-color: #ffffff; /* Give header a solid background to hide content scrolling underneath */
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    font-weight: 600;
}

.sticky-header-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
}

.sticky-header-table tbody tr:nth-of-type(even) {
    background-color: #f8f9fa;
}

</style>

<div class="sticky-header-container">
    <table class="sticky-header-table">
        <thead>
            <tr>
                <th scope="col">Log ID</th>
                <th scope="col">Timestamp</th>
                <th scope="col">Level</th>
                <th scope="col">Message</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>1001</td><td>2024-08-22 11:00:01</td><td>INFO</td><td>User logged in.</td></tr>
            <tr><td>1002</td><td>2024-08-22 11:00:05</td><td>INFO</td><td>Data sync started.</td></tr>
            <tr><td>1003</td><td>2024-08-22 11:00:15</td><td>DEBUG</td><td>Payload received from API.</td></tr>
            <tr><td>1004</td><td>2024-08-22 11:00:25</td><td>WARN</td><td>API response time > 500ms.</td></tr>
            <tr><td>1005</td><td>2024-08-22 11:00:30</td><td>INFO</td><td>Data sync completed.</td></tr>
            <tr><td>1006</td><td>2024-08-22 11:01:00</td><td>ERROR</td><td>Failed to connect to database.</td></tr>
            <tr><td>1007</td><td>2024-08-22 11:01:05</td><td>INFO</td><td>Retrying database connection...</td></tr>
            <tr><td>1008</td><td>2024-08-22 11:01:10</td><td>INFO</td><td>Database connection successful.</td></tr>
            <tr><td>1009</td><td>2024-08-22 11:02:00</td><td>INFO</td><td>Processing batch job #123.</td></tr>
            <tr><td>1010</td><td>2024-08-22 11:02:30</td><td>INFO</td><td>Batch job #123 complete.</td></tr>
            <tr><td>1011</td><td>2024-08-22 11:03:00</td><td>DEBUG</td><td>Checking for new tasks.</td></tr>
            <tr><td>1012</td><td>2024-08-22 11:04:00</td><td>INFO</td><td>No new tasks found. Idling.</td></tr>
            <tr><td>1013</td><td>2024-08-22 11:05:00</td><td>INFO</td><td>User logged out.</td></tr>
            
            <tr><td>1014</td><td>2024-08-22 11:05:10</td><td>INFO</td><td>Session terminated.</td></tr>
            <tr><td>1015</td><td>2024-08-22 11:05:20</td><td>DEBUG</td><td>Cleanup complete.</td></tr>
        </tbody>
    </table>
</div>

​x
 
<!DOCTYPE html>
<title>My Example</title>
​
<style>
/* --- This is the most important part of the setup --- */
/* 1. The container MUST have a defined height and overflow property. */
.sticky-header-container {
    height: 400px; /* Example height. Adjust as needed. */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ccc;
    border-radius: 8px;
}
​
.sticky-header-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* This allows the th to stick relative to the table */
    position: relative;
}
​
/* 2. The header cells (th) are what become sticky */
.sticky-header-table thead th {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Stick to the top of the container */
    z-index: 10; /* Ensure the header stays on top of the scrolling content */
​
    /* -- Standard header styling -- */
    padding: 12px 15px;
    background-color: #ffffff; /* Give header a solid background to hide content scrolling underneath */
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    font-weight: 600;
}
​
.sticky-header-table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
}
​
.sticky-header-table tbody tr:nth-of-type(even) {
    background-color: #f8f9fa;
}
​
</style>
​
<!-- 
    INSTRUCTIONS: To see the effect, scroll vertically inside this table. 
    The header will remain at the top of this container.
-->
<div class="sticky-header-container">
    <table class="sticky-header-table">
        <thead>
            <tr>
                <th scope="col">Log ID</th>
                <th scope="col">Timestamp</th>
                <th scope="col">Level</th>
                <th scope="col">Message</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>1001</td><td>2024-08-22 11:00:01</td><td>INFO</td><td>User logged in.</td></tr>
            <tr><td>1002</td><td>2024-08-22 11:00:05</td><td>INFO</td><td>Data sync started.</td></tr>
            <tr><td>1003</td><td>2024-08-22 11:00:15</td><td>DEBUG</td><td>Payload received from API.</td></tr>
            <tr><td>1004</td><td>2024-08-22 11:00:25</td><td>WARN</td><td>API response time > 500ms.</td></tr>
            <tr><td>1005</td><td>2024-08-22 11:00:30</td><td>INFO</td><td>Data sync completed.</td></tr>
            <tr><td>1006</td><td>2024-08-22 11:01:00</td><td>ERROR</td><td>Failed to connect to database.</td></tr>
            <tr><td>1007</td><td>2024-08-22 11:01:05</td><td>INFO</td><td>Retrying database connection...</td></tr>
            <tr><td>1008</td><td>2024-08-22 11:01:10</td><td>INFO</td><td>Database connection successful.</td></tr>
            <tr><td>1009</td><td>2024-08-22 11:02:00</td><td>INFO</td><td>Processing batch job #123.</td></tr>
            <tr><td>1010</td><td>2024-08-22 11:02:30</td><td>INFO</td><td>Batch job #123 complete.</td></tr>
            <tr><td>1011</td><td>2024-08-22 11:03:00</td><td>DEBUG</td><td>Checking for new tasks.</td></tr>
            <tr><td>1012</td><td>2024-08-22 11:04:00</td><td>INFO</td><td>No new tasks found. Idling.</td></tr>
            <tr><td>1013</td><td>2024-08-22 11:05:00</td><td>INFO</td><td>User logged out.</td></tr>
            <!-- Add more rows to ensure vertical scrolling -->
            <tr><td>1014</td><td>2024-08-22 11:05:10</td><td>INFO</td><td>Session terminated.</td></tr>
            <tr><td>1015</td><td>2024-08-22 11:05:20</td><td>DEBUG</td><td>Cleanup complete.</td></tr>
        </tbody>
    </table>
</div>