强制表列不超过给定的css宽度

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%;
}

我希望每列都是80px的25%,因此大小为20px.如何阻止第一列变大(其内容可以隐藏).

Answer 1

你可以用 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;
}

一个例子:http://jsfiddle.net/wsastn47/1/

编辑: @mevius建议自动换行:break-word;