HTML CSS 如何阻止表格单元格展开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1236148/
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
HTML CSS How to stop a table cell from expanding
提问by flavour404
I have a table which is built with the contents coming from a returned dataset. What I want to do is stop a 'description' cell from expanding over 280px wide, no matter what the content length (its s string). I have tried:
我有一个表，它是用来自返回数据集的内容构建的。我想要做的是阻止“描述”单元格扩展超过 280 像素宽，无论内容长度（其 s 字符串）如何。我试过了：
<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" >
But this doesn't seem to work. I don't want it to wrap, nor do I want anything over 280px to be displayed.
但这似乎不起作用。我不希望它换行，也不希望显示超过 280 像素的任何内容。
采纳答案by RSolberg
It appears that your HTML syntax is incorrect for the table cell. Before you try the other idea below, confirm if this works or not... You can also try adding this to your table itself: table-layout:fixed.. .
对于表格单元格，您的 HTML 语法似乎不正确。在您尝试下面的其他想法之前，请确认这是否有效...您也可以尝试将其添加到您的表格中： table-layout:fixed.. 。
<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;">
[content]
</td>
New HTML
新 HTML
<td>
<div class="MyClass"">
[content]
</div>
</td>
CSS Class:
CSS类：
.MyClass{
height: 280px;
width: 456px;
overflow: hidden;
white-space: nowrap;
}
回答by JP Silvashy
<table border="1" width="183" style='table-layout:fixed'>
<col width="67">
<col width="75">
<col width="41">
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
<tr>
<td>Row 1</td>
<td>Text</td>
<td align="right">1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Abcdefg</td>
<td align="right">123</td>
</tr>
<tr>
<td>Row 3</td>
<td>Abcdefghijklmnop</td>
<td align="right">123456</td>
</tr>
</table>
I know it's old school, but give that a try, it works.
我知道这是老派，但试一试，它有效。
may also want to add this:
可能还想添加这个：
<style>
td {overflow:hidden;}
</style>
Of course, you'd put this in a separate linked stylesheet, and not inline... wouldn't you ;)
当然，你会把它放在一个单独的链接样式表中，而不是内联......不是吗;)
回答by Fran?ois DELAGE
No javascript, just CSS. Works fine!
没有 javascript，只有 CSS。工作正常！
.no-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
回答by Mattk90
To post Chris Dutrow's comment here as answer:
在此处发布 Chris Dutrow 的评论作为答案：
style="table-layout:fixed;"
in the style of the table itself is what worked for me. Thanks Chris!
桌子本身的风格对我有用。谢谢克里斯！
Full example:
完整示例：
<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
<tbody>
<td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">
Your table content here
</td>
</tbody>
</table>
回答by Juan David Arce
This could be useful. Like another answer it is just CSS.
这可能很有用。像另一个答案一样，它只是 CSS。
td {
word-wrap: break-word;
}
回答by John
It's entirely possible if your code has enoughrelative logic to work with.
如果您的代码有足够的相关逻辑可以使用，则完全有可能。
Simply use the viewport units though for some the math may be a bit more complicated. I used this to prevent list items from bloating certain table columns with much longer text.
只需使用视口单位，但对于某些数学计算可能会更复杂一些。我用它来防止列表项用更长的文本膨胀某些表格列。
ol {max-width: 10vw; padding: 0; overflow: hidden;}
Apparently max-widthon colgroupelements do notwork which is pretty lame to be dependent entirely on child elements to control something on the parent.
显然，max-width在colgroup元素并没有工作，这是相当跛脚是完全依赖于子元素的父控件的东西。
回答by Akbar123
Simply set the max-width attribute to 280px like this:
只需像这样将 max-width 属性设置为 280px：
<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" max-width="280px" width="280px">
This will solve your problem.
这将解决您的问题。
