我有一张桌子，我想在td上设置30px的固定宽度。问题在于，当td中的文本太长时，td会被拉宽到30px以上。Overflow:hidden在td上也不起作用，我需要某种方式隐藏溢出的文本并保持td宽度为30px。
<table cellpadding="0" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
Answers:
它不是最漂亮的CSS，但是我可以使用它：
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
带有和不带有椭圆的示例：
body {
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}
table {
border: 1px solid #555;
border-width: 0 0 1px 1px;
}
table td {
border: 1px solid #555;
border-width: 1px 1px 0 0;
}
/* What you need: */
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
table.with-ellipsis td {
text-overflow: ellipsis;
}<table cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
<br />
<table class="with-ellipsis" cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>您也可以尝试使用：
table {
table-layout:fixed;
}
table td {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
不仅表格单元正在增长，表格本身也可以增长。为避免这种情况，您可以为表格分配固定的宽度，这将强制遵守单元格的宽度：
table {
table-layout: fixed;
width: 120px; /* Important */
}
td {
width: 30px;
}
（使用overflow: hidden和/或是text-overflow: ellipsis可选的，但强烈建议您使用以获得更好的视觉体验）
因此，如果您的情况允许您为表格分配固定宽度，则此解决方案可能是其他给定答案的更好替代方法（无论是否使用固定宽度都可以使用）
上面的建议破坏了我的桌子的布局，所以我最终使用了：
td {
min-width: 30px;
max-width: 30px;
overflow: hidden;
}
维护起来很恐怖，但是比为站点重新做所有现有的CSS容易。希望它可以帮助别人。
overflow: hidden至少Opera Blink甚至不需要。
放入div内部td并为width:50px;overflow: hidden;div Jsfiddle链接赋予以下样式
<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
只需将td的数量除以100％。例如，您有4 td：
<html>
<table>
<tr>
<td style="width:25%">This is a text</td>
<td style="width:25%">This is some text, this is some text</td>
<td style="width:25%">This is another text, this is another text</td>
<td style="width:25%">This is the last text, this is the last text</td>
</tr>
</table>
</html>
我们在每个td中使用25％来最大化整个表格的100％空间