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.

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

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top