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;

Answer 2

我建议如下：

table {
    width: 80px;
}
td {
    width: 25%;
    border: 1px dotted blue;
    word-break: break-all;
}

使用word-break属性允许长文本字符串在表中包装细胞并保持可见。

请参阅演示：http://jsfiddle.net/audetwebdesign/7ptrtwac/

注意：max-width不需要td属性。

Answer 3

您也可以使用以下CSS：

table {
width: 180px;
border-collapse:collapse; 
table-layout:fixed;
}
td {
  overflow: hidden;
  max-width: 25%;
  width: 25%;
  word-wrap:break-word;
  border:solid 1px;

}

演示链接DEMO FIDDLE

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

3 个答案: