CSS 表 td 宽度 - 固定，不灵活
[英]CSS table td width - fixed, not flexible
问题描述
我有一张桌子，我想在 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>
8 个解决方案
解决方案1
81 已采纳 2011-07-12 02:43:59
这不是最漂亮的 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>
解决方案2
44 2012-04-17 16:36:48
你也可以尝试使用它：
table {
table-layout:fixed;
}
table td {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
解决方案3
29 2012-11-04 17:00:32
不仅表格单元在增长，表格本身也可以增长。 为避免这种情况，您可以为表格分配固定宽度，这反过来又会强制遵守单元格宽度：
table {
table-layout: fixed;
width: 120px; /* Important */
}
td {
width: 30px;
}
（使用overflow: hidden和/或text-overflow: ellipsis是可选的，但强烈建议使用以获得更好的视觉体验）
因此，如果您的情况允许您为表格分配固定宽度，则此解决方案可能是其他给定答案的更好选择（无论是否使用固定宽度）
解决方案4
12 2013-06-16 17:44:10
上述建议破坏了我桌子的布局，所以我最终使用了：
td {
min-width: 30px;
max-width: 30px;
overflow: hidden;
}
这很难维护，但比为站点重新执行所有现有的 css 更容易。 希望它可以帮助别人。
解决方案5
0
Chrome 37. 对于非固定table ：
td {
width: 30px
max-width: 30px;
overflow: hidden;
}
前两个重要！ 否则-它会流走！
解决方案6
-1 2013-09-24 11:32:33
这种解决方法对我有用...
<td style="white-space: normal; width:300px;">
解决方案7
-1 2014-09-16 13:01:15
在td中放置一个div并给出以下样式width:50px;overflow: hidden; 到 div
Jsfiddle 链接
<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
解决方案8
-5 2015-12-16 01:43:02
只需将 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% 空间
如何使textarea的宽度固定但保持高度灵活的CSS
[英]how to make the textarea's width fixed but keep the height flexible CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.