Well-behaved Table

This table maintains a fixed width and minimum widths for each column. Column widths should remain in constant proportion when resized, and should not go below a certain width.

by ksevksev

HTML

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="small">percent with min width</td>
        <td class="large">percent with min width</td>
        <td class="med">percent with min width</td>
    </tr>
    <tr>
        <td class="fixed">fixed</td>
        <td class="small">percent with min width</td>
        <td class="large">percent with min width</td>
        <td class="med">percent with min width</td>
    </tr>
    <tr>
        <td class="fixed">fixed</td>
        <td class="small">percent with min width</td>
        <td class="large">percent with min width</td>
        <td class="med">percent with min width</td>
    </tr>
</table>

<table>
    <tr>
        <td class="fixed">fixed</td>
        <td class="small">percent with min width</td>
        <td class="max">100%</td>
    </tr>
</table>

CSS

td
{
    padding: 2px;
}

.fixed
{
    width: 100px;
    background-color: tan;
}

.small
{
    min-width: 150px;
    width: 15%;
    background-color: yellow;
}

.large
{
    min-width: 550px;
    width: 55%;
    background-color: green;
}

.max
{
    width: 100%;
    background-color: cyan;
}

.med
{
    min-width: 300px;
    width: 30%;
    background-color: blue;
}