Html 无论内容如何，强制表格列宽始终固定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15668583/
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
Force table column widths to always be fixed regardless of contents
提问by datadamnation
I have an html table with table-layout: fixedand a td with a set width. The column still expands to hold the contents of text that doesn't contain a space. Is there a way to fix this other than wrapping the contents of each td in a div?
我有一个table-layout: fixed带有设置宽度的 html 表和一个 td 。该列仍会扩展以容纳不包含空格的文本内容。除了将每个 td 的内容包装在 div 中之外，还有其他方法可以解决这个问题吗？
Example: http://jsfiddle.net/6p9K3/29/
示例：http: //jsfiddle.net/6p9K3/29/
<table>
<tbody>
<tr>
<td style="width: 50px;">Test</td>
<td>Testing 1123455</td>
</tr><tr>
<td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td>B</td>
</tr>
</tbody>
</table>
table
{
table-layout: fixed;
}
td
{
border: 1px solid green;
overflow: hidden;
}
In the example, you can see that the column with AAAAAAAAAAAA... expands despite being explicitly set to 50px wide.
在示例中，您可以看到带有 AAAAAAAAAAAA... 的列尽管显式设置为 50px 宽，但仍在扩展。
回答by Arie Xiao
回答by Drew Anderson
Try looking into the following CSS:
尝试查看以下 CSS：
word-wrap:break-word;
Web browsers should not break-up "words" by default so what you are experiencing is normal behaviour of a browser. However you can override this with the word-wrap CSS directive.
默认情况下，Web 浏览器不应分解“单词”，因此您所经历的是浏览器的正常行为。但是，您可以使用自动换行 CSS 指令覆盖它。
You would need to set a width on the overall table then a width on the columns. "width:100%;" should also be OK depending on your requirements.
您需要在整个表格上设置一个宽度，然后在列上设置一个宽度。“宽度：100%；” 也应该可以，具体取决于您的要求。
Using word-wrap may not be what you want however it is useful for showing all of the data without deforming the layout.
使用自动换行可能不是您想要的，但是它对于显示所有数据而不使布局变形很有用。
回答by kelly johnson
Make the table rock solid BEFORE the css. Figure your width of the table, then use a 'controlling' row whereby each td has an explicit width, all of which add up to the width in the table tag.
在 css 之前使表格坚如磐石。计算表格的宽度，然后使用“控制”行，其中每个 td 都有一个明确的宽度，所有这些加起来就是表格标签中的宽度。
Having to do hundreds html emails to work everywhere, using the correct HTML first, then styling w/css will work around many issues in all IE's, webkit's and mozillas.
必须处理数百封 html 电子邮件才能在任何地方工作，首先使用正确的 HTML，然后使用 w/css 样式将解决所有 IE、webkit 和 mozilla 中的许多问题。
so:
所以：
<table width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="50"></td>
<td width="100"></td>
<td width="150"></td>
</tr>
<tr>
<td>your stuff</td>
<td>your stuff</td>
<td>your stuff</td>
</tr>
</table>
Will keep a table at 300px wide. Watch images that are larger than the width by extremes
将表格保持在 300px 宽。观看超过极端宽度的图像
回答by John Fisher
You can add a divto the td, then style that. It should work as you expected.
您可以添加div到td，然后风格。它应该按您的预期工作。
<td><div>AAAAAAAAAAAAAAAAAAA</div></td>
Then the css.
然后是css。
td div { width: 50px; overflow: hidden; }
回答by Stefan Brendle
You can also work with "overflow: hidden" or "overflow-x: hidden" (for just the width). This requires a defined width (and/or height?) and maybe a "display: block" as well.
您还可以使用“溢出：隐藏”或“溢出-x：隐藏”（仅用于宽度）。这需要定义的宽度（和/或高度？），也可能需要“显示：块”。
"Overflow:Hidden" hides the whole content, which does not fit into the defined box.
“溢出：隐藏”隐藏整个内容，它不适合定义的框。
Example:
例子：
HTML:
HTML：
<table border="1">
<tr>
<td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td>bbb</td>
<td>cccc</td>
</tr>
</table>
CSS:
CSS：
td div { width: 100px; overflow-y: hidden; }
EDIT: Shame on me, I've seen, you already use "overflow". I guess it doesn't work, because you don't set "display: block" to your element ...
编辑：我很惭愧，我已经看到，您已经使用了“溢出”。我想它不起作用，因为你没有为你的元素设置“显示：块”......
回答by PfunnyGuy
You can also use percentages, and/or specify in the column headers:
您还可以使用百分比，和/或在列标题中指定：
<table width="300">
<tr>
<th width="20%">Column 1</th>
<th width="20%">Column 2</th>
<th width="20%">Column 3</th>
<th width="20%">Column 4</th>
<th width="20%">Column 5</th>
</tr>
<tr>
<!--- row data -->
</tr>
</table>
The bonus with percentages is lower code maintenance: you can change your table width without having to re-specify the column widths.
百分比的好处是代码维护更少：您可以更改表格宽度而无需重新指定列宽。
Caveat: It is my understanding that table width specified in pixels isn't supported in HTML 5; you need to use CSS instead.
警告：据我了解，HTML 5 不支持以像素为单位指定的表格宽度；您需要改用 CSS。
回答by MikeyMo
This works for me
这对我有用
td::after {
content: '';
display: block;
width: 30px;
}
回答by Alex
I would try setting it to max-width:50px;
我会尝试将其设置为 max-width:50px;
