JSFiddle - React, Tailwind, and code Playground

by Jérôme Beau

HTML

<p>Here is a scrolling table :</p>
<table>
    <thead>
        <tr>
            <th colspan="2" >Spanned heading</th>
                        <th rowspan="2">Heading 3</th>
            <th>Head 4</th>
            <th>Last one</th>
        <tr>
            <th>Heading of first column</th>
            <th>Second heading</th>
            <th>Head 4</th>
            <th>Last one</th>
        </tr>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1st</td>
            <td>Another cell</td>
            <td>Cell 3</td>
            <td>Quite long contents with a lot of text</td>
            <td>Last cell of first row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row 5</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>Last cell of last row</td>
        </tr>
    </tbody>
</table>

CSS

thead {
    display: table;
    table-layout:fixed;
    width: 100%;
}
tbody {
    display: block;
    height: 10em;
    overflow-y: scroll;
}
tbody tr {
    display: table;
    table-layout:fixed;
    width: 100%;
}
th, td {
    width: auto;
    border: 1px solid;
}