Html CSS 表格 td 宽度 - 固定，不灵活
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6658947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS table td width - fixed, not flexible
提问by Richard Westington
I have a table and I want to set a fixed width of 30px on the td's. the problem is that when the text in the td is too long, the td is stretched out wider than 30px. Overflow:hiddendoesn't work either on the td's, I need some way of hiding the overflowing text and keeping the td width 30px.
我有一张桌子，我想在 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>
回答by C???
It's not the prettiest CSS, but I got this to work:
这不是最漂亮的 CSS，但我让它起作用了：
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
Examples, with and without ellipses:
有和没有省略号的例子：
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>回答by Dmitri
you also can try to use that:
你也可以尝试使用它：
table {
table-layout:fixed;
}
table td {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
回答by Daniel Rikowski
It is not only the table cellwhich is growing, the tableitself can grow, too. To avoid this you can assign a fixed width to the table which in return forces the cell width to be respected:
不仅表格单元格在增长，表格本身也可以增长。为避免这种情况，您可以为表格分配固定宽度，从而强制遵守单元格宽度：
table {
table-layout: fixed;
width: 120px; /* Important */
}
td {
width: 30px;
}
(Using overflow: hiddenand/or text-overflow: ellipsisis optional but highly recommended for a better visual experience)
（使用overflow: hidden和/或是text-overflow: ellipsis可选的，但强烈建议使用以获得更好的视觉体验）
So if your situation allows you to assign a fixed width to your table, this solution might be a better alternative to the other given answers (which do work with or without a fixed width)
因此，如果您的情况允许您为表格分配固定宽度，则此解决方案可能是其他给定答案的更好替代方案（无论是否使用固定宽度都可以）
回答by Precastic
The above suggestions trashed the layout of my table so I ended up using:
上述建议破坏了我的桌子布局，所以我最终使用了：
td {
min-width: 30px;
max-width: 30px;
overflow: hidden;
}
This is horrible to maintain but was easier than re-doing all the existing css for the site. Hope it helps someone else.
这维护起来很糟糕，但比为网站重新做所有现有的 css 更容易。希望它可以帮助别人。
回答by diogoareia
This workaround worked for me...
这个解决方法对我有用......
<td style="white-space: normal; width:300px;">
回答by Atur
Put a divinside tdand give following style width:50px;overflow: hidden;to the div
Jsfiddle link
放入一个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>
回答by befzz
Chrome 37.
for non fixed table:
Chrome 37. 对于非固定table：
td {
width: 30px;
max-width: 30px;
overflow: hidden;
}
first two important! else - its flow away!
前两个重要！否则——它流走了！
回答by Chrisitan Joe Dulaca
Just divide the number of td to 100%. Example, you have 4 td's:
只需将 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>
We use 25% in each td to maximize the 100% space of the entire table
我们在每个 td 中使用 25% 来最大化整个表的 100% 空间
