html - 强制表列不超过给定的 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%;
}

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

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 建议 word-wrap: break-word;