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.
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.
This awesome script developed by jakob-e, Visit their official codepen repository for more information and follow for future updates.