Force table column to not excess given css width

Question

HTML

<table >
<tr>
    <td>veeeeeeeeeeeeeeeeeeeeery looong</td>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>

CSS

table {
    width: 80px;
}
td {
    overflow: hidden;
    max-width: 25%;
    width: 25%;
}

I want every column to be 25% of 80px, thus 20px in size. How do I stop the first column from getting larger (its content can be hidden).

Answer 1

You could use table-layout: fixed

table {
    width: 80px;
    border: 1px solid #333;
    table-layout: fixed;
}

td {
    overflow: hidden;
    max-width: 25%;
    width: 25%;
    border: 1px solid #333;
    word-wrap: break-word;
}

An example: http://jsfiddle.net/wsastn47/1/

edit: @mevius suggestion word-wrap: break-word;