Scrollable Table (CSS)

by onury

HTML

<table class="scrollTable">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>colX</td>
            <td>colX</td>
            <td>colX</td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col1</td>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col1</td>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col1</td>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col1</td>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
            <td>col1</td>
            <td>col1</td>
        </tr>
        <tr>
            <td>colA</td>
            <td>colA</td>
            <td>colA</td>
        </tr>
    </tbody>
</table>

<br />
Try scrolling the table...

CSS

.scrollTable th, .scrollTable td {
    width: 80px;
    text-align: center;
    border: 1px solid #E0E0E0;
}
.scrollTable th:first-child, .scrollTable td:first-child {
    width: 120px;
}
.scrollTable thead {
    display: block;
}
.scrollTable tbody {
    display: block;
    height: 100px;
    overflow: auto;
}