HTML table pure CSS fixed header

This is a, slightly hackish, pure CSS implementation of a fixed table header. It is implemented in HTML5 and CSS3 and is tested in FX 25, Chrome 31 and IE 10.

by electricvisions

HTML

<div class="container">
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Value</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
            <tr>
                <td>something</td>
                <td>1</td>
                <td>12376</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.container {
    position: relative;
    padding-top: 25px;
}
table {
    display: block;
    overflow-y: auto;
    height: 100px;
    width:100%;
    border-collapse: collapse;
}

thead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

td, th {
    text-align: right;
    min-width: 100px;
}

th:first-child, td:first-child {
    text-align: left;
    width: 100%;
}