Fixed layout table with border-box cells

by zinkkrysty

HTML

<table>
    <thead>
        <tr>
            <th class="one">One</th>
            <th class="two">Two</th>
            <th class="three">Three</th>
            <th class="four">Four</th>
            <th class="five">Five</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="one">1</td>
            <td class="two">Text that could be too long for this column and it should be truncated.</td>
            <td class="three">3</td>
            <td class="four">4</td>
            <td class="five">5</td>
        </tr>
        <tr>
            <td class="one">1</td>
            <td class="two">2</td>
            <td class="three">3</td>
            <td class="four">4</td>
            <td class="five">5</td>
        </tr>
        <tr>
            <td class="one">1</td>
            <td class="two">2</td>
            <td class="three">3</td>
            <td class="four">4</td>
            <td class="five">5</td>
        </tr>
        <tr>
            <td class="one">1</td>
            <td class="two">2</td>
            <td class="three">3</td>
            <td class="four">4</td>
            <td class="five">5</td>
        </tr>
        <tr>
            <td class="one">1</td>
            <td class="two">2</td>
            <td class="three">3</td>
            <td class="four">4</td>
            <td class="five">5</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 550px;
    border: 1px solid #AAA;
    table-layout: fixed;
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #DDD;
    text-align: left;
    padding: 5px 15px 5px 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.one {
    width: 60px;
}
.two {
    width: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.three, .four, .five {
    width: 90px;
}