• 1/12/2019
• 601
• HTML5, Tables, Fixed Header Tables

In one of my recent project I had to display data in HTML table with header row remains fixed and body can be scrolled vertically.

Since the html was generated on server and rendered directly on browser, I thought of using only css do this. Check the code bellow.

Example

Code

    <table class="fixedHeader">
        <thead>
            <tr>
                <th style="width:30px;">#</th>
                <th style="width:200px;">Skill Name</th>
                <th style="width:150px;">Experience</th>
                <th style="width:150px;">Expertise</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:30px;">1.</td>
                <td style="width:200px;">.Net Framework</td>
                <td style="width:150px;">15 Years</td>
                <td style="width:150px;">Expert</td>
            </tr>
            <tr>
                <td style="width:30px;">2.</td>
                <td style="width:200px;">ASP.Net Web Forms</td>
                <td style="width:150px;">15 Years</td>
                <td style="width:150px;">Expert</td>
            </tr>
            ...add more rows here
        </tbody>
    </table>

    <style>
        //this is decorative only
        .fixedHeader td, .fixedHeader th {
        border: 1px solid;
        border-color: cadetblue;
        text-align: left;
        padding: 5px;

        }
        //This is important
        .fixedHeader > thead, .fixedHeader > tbody {
        display: block;
        }

        //set max height and overflow properties
        .fixedHeader > tbody {
        max-height: 300px;
        overflow: auto;
        }
    </style>
    

Details

There are two important aspects this solution.

1. Each td and th has a specific width.

   Setting width of each cell will enable browser to enforce it rather than calculate the best fit.

2. tbody and thead are set to display-block

   This is required so that body and head can be independent of the table tag.