Create Scrolling Table With Fixed Header in Pure CSS

In this tutorial I am going to share css code snipped to make Scrolling Table With Fixed Header. If you want to display large table data on single page then when ever user scroll table he/she will not able to see the header column after scrolling the table which reduce user experience so to maintain good user experience you can make your table scrollable with fixed table header which improve your website user experience. Then Scrolling Table With Fixed Header written in pure CSS without any third party plugins.
Create Scrolling Table With Fixed Header in Pure CSS

HTML

Sample HTML table where we have to apply Scrolling Table With Fixed Header effect.

<div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Company</th>
                <th>Phone</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Walter</td>
                <td>Ante Limited</td>
                <td>1-273-871-7595</td>
                <td>9740 Ac St.</td>
            </tr>
            <tr>
                <td>Coby</td>
                <td>Elit Pretium Et Incorporated</td>
                <td>1-267-422-0089</td>
                <td>P.O. Box 191, 5676 Lectus St.</td>
            </tr>
            <tr>
                <td>Tyler</td>
                <td>Risus Company</td>
                <td>1-842-161-4978</td>
                <td>P.O. Box 914, 962 Vel, Street</td>
            </tr>
            <tr>
                <td>Joseph</td>
                <td>Laoreet Industries</td>
                <td>1-424-707-3386</td>
                <td>Ap #679-459 Lectus Avenue</td>
            </tr>
            <tr>
                <td>Paki</td>
                <td>Scelerisque Scelerisque Dui Foundation</td>
                <td>1-316-370-0180</td>
                <td>703-1621 Dictum Road</td>
            </tr>
            <tr>
                <td>Julian</td>
                <td>Sed Limited</td>
                <td>1-498-830-7716</td>
                <td>1312 Tincidunt, Avenue</td>
            </tr>
            <tr>
                <td>Zane</td>
                <td>Sed Sem Institute</td>
                <td>1-404-795-0591</td>
                <td>769-7994 Vitae, Ave</td>
            </tr>
            <tr>
                <td>Channing</td>
                <td>Aliquam Institute</td>
                <td>1-576-358-9359</td>
                <td>P.O. Box 665, 7513 Quis, Rd.</td>
            </tr>
 
        </tbody>
    </table>
</div>


CSS

Apply css on above table to make it Scrolling Table With Fixed Header effect.

 
 
.table-wrap {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;   
}
table {
    border-collapse: collapse;
    width: 100%;
}
thead th { 
    position: sticky; 
    top: 0; 
}
//  just some styling
html { box-sizing: border-box; } *,*::before,*::after { box-sizing: inherit; position: relative; }
body { padding: 20px; -webkit-font-smoothing: antialiased; }
th,td { border: 1px solid #ccc; padding: .5rem; font: caption; outline-offset: -1px; }
 
th { 
    font-weight: 700; z-index: 1;  
    padding: 1rem .5rem; 
}
th:after {
    content: '';
    display: block;
    position: absolute;
    background-color: #d4ebf2;
    top: -1px;
    left:0;
    right: 0;
    bottom: 0;
    z-index: -1;
    outline: 1px solid #ccc;
}
.table-wrap { 
    border:1px solid #ccc; 
    -webkit-overflow-scrolling: touch;
}
table { margin: -1px; width: calc(100% + 2px); }
tr:nth-of-type(even){ background-color: whitesmoke; } 
td:nth-of-type(3){ white-space: nowrap; }
 
 
.table-wrap::-webkit-scrollbar {
    -webkit-appearance: none;
    border-left: 1px solid #ccc;
    background-image: linear-gradient(to top, whitesmoke, white);
}
 
.table-wrap::-webkit-scrollbar:vertical {
    width: .6rem;
}
 
.table-wrap::-webkit-scrollbar:horizontal {
    width: .6rem;
}
 
.table-wrap::-webkit-scrollbar-thumb {
    border-radius: .8rem;
    // border: 1px solid white; // should match background, can't be transparent 
    background-color:  rgba(51, 51, 51, 0.5)
}

See live demo and download source code.

DEMO

This awesome script developed by jakob-e, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.