Table Layout

by lavinski

HTML

<table>
    <tr>
        <th class='width-variable'>header 234567895678657</td>
        <th class='width-fixed'>header 234567895678657</td>
        <th class='width-fixed'>header 234567895678657</td>
    </tr>
    <tr>
        <td class='width-variable'>text</td>
        <td class='width-fixed'>text 234567895678657</td>
        <td class='width-fixed'>text 234567895678657</td>
    </tr>
    <tr>
        <td class='width-variable'>text</td>
        <td class='width-fixed'>text 234567895678657</td>
        <td class='width-fixed'>text 234567895678657</td>
    </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 100%;
}

.width-variable {
    border: 1px solid black;
    overflow: hidden;
    width: auto;
    background: yellow;
    white-space: nowrap;

}

.width-fixed {
    border: 1px solid black;
    overflow: hidden;
    width: 100px;
    background: green;
}