Table Header Always Displayed – CSS Solution

A common problem I had and saw online was making a table on a web page have the top/header row always displayed while the body of the table scrolls. I found this solution on Stack Overflow and it worked well! I cannot remember who suggested this, but if you are the person who did this, email me and I will credit you.

This solution is done purely with CSS and applied to an HTML table. Take the following CSS code and put it in your CSS file/head:

            .table-scroll {
                display: table;
                min-width: 100%;
                color: black;
                background-color: white;
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                font-size: 13px;
            }

            .table-scroll thead,
            .table-scroll tbody {
                width: 100%;
            }

            .table-scroll thead {
                overflow-y: scroll;
                display: table;
                table-layout: fixed;
                margin-left: -1px;
                background-color: #f5f4f2;
            }

            .table-scroll tbody {
                outline-style: solid;
                outline-color: black;
                outline-width: 1px;              
                overflow-y: auto;
                max-height: 85vh;
                display: block;
            }
            .table-scroll tr {
                width: 100%;
                text-align: left;
                display: table;
                table-layout: fixed;
            }
            .table-scroll  td{
                border-right: 1pt solid lightgrey;
                border-bottom: 1pt solid lightgrey;
            }
            ::-webkit-scrollbar {
                width: 5px;
            }
            /* Track */
            ::-webkit-scrollbar-track {
                background: white;
            }

            /* Handle */
            ::-webkit-scrollbar-thumb {
                background:#D8D8D8;
                border-bottom-left-radius: 2px;
                border-bottom-right-radius: 2px;
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;    
            }

Then, create an HTML table and give it ‘table-scroll’ class. The webkit-scrollbar-thumb and track code affects the scrollbar associated with the table. In this case, you will get a nice, thin scrollbar on the side!

This table will now have a table header that is always displayed at the top, even if you scroll all over the body. This is a great solution to this problem that is simple to implement, lightweight, and easy to understand.

You can also play around with the styling, so you can have the table be slightly larger, smaller, or have the row be different heights. This solution is really only affecting the behavior of the table as you scroll, so you are free to make changes to the visuals of the tables without losing the header being at the top.

Try implementing this solution while following one of my other articles on tables!