Scrollable & positionable wide tables

by tonytlwu

HTML

<table>
    <caption>Table with little content</caption>
    <tr>
        <td>ABC and DEF</td>
        <td>123 and 4567890</td>
    </tr>
    <tr>
        <td>ABC and DEF</td>
        <td>123 and 4567890</td>
    </tr>
</table>

<table>
    <caption>Table with a lot of content</caption>
    <tr>
        <td>ABC and DEF</td>
        <td>123 and 4567890</td>
        <td>GHI and JKL</td>
        <td>MNO</td>
        <td>OQRSTUVWXYZ</td>
        <td>1234567890 1234567890 1234567890</td>
        <td>123456789012345678901234567890</td>
    </tr>
    <tr>
        <td>ABC and DEF</td>
        <td>123 and 4567890</td>
        <td>GHI and JKL</td>
        <td>MNO</td>
        <td>OQRSTUVWXYZ</td>
        <td>1234567890 1234567890 1234567890</td>
        <td>123456789012345678901234567890</td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
    display: block;
    overflow: auto;
}
td {
    border: 1px solid #ddd;
    padding: 3px;
}