Create Scrolling Table With Fixed Header in Pure CSS

by

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.


    

        
            

                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.

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.

Published by Rohit