CSS 表格 td 宽度 - 固定，不灵活
Posted
技术标签:
【中文标题】CSS 表格 td 宽度 - 固定，不灵活【英文标题】：CSS table td width - fixed, not flexible 【发布时间】：2011-10-03 06:57:18 【问题描述】：我有一张桌子，我想在 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>
【问题讨论】：
【参考方案1】：这不是最漂亮的 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>【讨论】：
在 Chrome 中不起作用。它创建了一个非常奇怪的堆叠布局。 对...已编辑。我不太确定这里的浏览器兼容性。 最大的问题是它的显示行为从表格单元格变为 div 样式，具有边距、边框、填充和方向。 @DanielAntunesPinto：是的，我认为静态宽度将是列跨越的问题。这并不是一个解决所有问题的解决方案。它是根据 OP 的需求量身定制的（“我想在 td 上设置 30px 的固定宽度”）。【参考方案2】：您也可以尝试使用它：
table
table-layout:fixed;
table td
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
http://www.w3schools.com/cs-s-ref/pr_tab_table-layout.asp
【讨论】：
为此，我认为您仍然需要在表格本身上设置宽度。所以我认为 Daniel Rikowski 的回答更准确。 太棒了。另一个解决方案只是删除了表格布局，例如在 Outlook 上不起作用。然而，表格确实需要有一个宽度。【参考方案3】：不仅表格单元格在增长，表格本身也可以增长。 为避免这种情况，您可以为表格分配固定宽度，这反过来会强制遵守单元格宽度：
table
table-layout: fixed;
width: 120px; /* Important */
td
width: 30px;
（使用overflow: hidden 和/或text-overflow: ellipsis 是可选的，但强烈建议使用以获得更好的视觉体验）
因此，如果您的情况允许您为表格分配固定宽度，则此解决方案可能是其他给定答案的更好选择（无论是否使用固定宽度）
【讨论】：
是的，表格宽度是关键！！【参考方案4】：以上建议破坏了我的桌子布局，所以我最终使用了：
td
min-width: 30px;
max-width: 30px;
overflow: hidden;
这很难维护，但比为网站重新做所有现有的 css 更容易。希望它可以帮助别人。
【讨论】：
overflow: hidden 至少在 Opera Blink 中是不需要的。【参考方案5】：
这个解决方法对我有用...
<td style="white-space: normal; width:300px;">
【讨论】：
是的，但它自 html4 以来已被弃用【参考方案6】：在td 中放置一个div 并为div 赋予以下样式width:50px;overflow: hidden;Jsfiddle link
<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
【讨论】：
【参考方案7】：铬 37。
对于非固定table:
td
width: 30px;
max-width: 30px;
overflow: hidden;
前两个重要！否则 - 它会流走！
【讨论】：
【参考方案8】：只需将 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% 空间
【讨论】：
这与问题无关以上是关于CSS 表格 td 宽度 - 固定，不灵活的主要内容，如果未能解决你的问题，请参考以下文章