我有一张桌子,我想在 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>
这不是最漂亮的 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 更容易。希望它对其他人有帮助。
这个解决方法对我有用......
<td style="white-space: normal; width:300px;">
将
div
放入 td
中,并为 div 赋予以下样式 width:50px;overflow: hidden;
<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
Chrome 37。 对于非固定
table
:
td {
width: 30px;
max-width: 30px;
overflow: hidden;
}
前两个重要!否则 - 它就会消失!
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>
只需将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%空间