如何防止我的 html 表格拉伸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1183676/
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
How do I prevent my html table from stretching
提问by Ryan
Sometimes when a piece of data in one of my table cells is too long it stretches the cell and deforms the layout of the entire table. how can i prevent this?
有时，当我的一个表格单元格中的一段数据太长时，它会拉伸单元格并使整个表格的布局变形。我怎样才能防止这种情况？
回答by artificialidiot
You probably want table-layout:fixedand set width on the first cells of a row.
您可能想要table-layout:fixed在一行的第一个单元格上设置宽度。
See http://www.w3.org/TR/CSS2/tables.html#fixed-table-layoutfor detailed explanation.
有关详细说明，请参阅http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout。
回答by Shawn
I just had the same problem and ended up solving it with this:
我刚刚遇到了同样的问题，最终解决了这个问题：
table?{ width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ }
Apparently, setting the table width to something very small forces it to break text up and take less horizontal space. Words will not be broken though, so the table will end up being at least large enough for the largest word of each column.
显然，将表格宽度设置为很小的值会迫使它分解文本并占用更少的水平空间。单词不会被打断，因此表格最终将至少足以容纳每列中最大的单词。
Tried tested and true on:
试过测试和真：
Linux (Ubuntu 10.04)
Linux (Ubuntu 10.04)
- Firefox 3.6.18
- Chromium-browser 12.0.742.112 (90304) whatever all that means
- Konqueror 4.5.3
- SeaMonkey 2.0.11
- 火狐 3.6.18
- Chromium-browser 12.0.742.112 (90304) 不管这意味着什么
- 征服者 4.5.3
- 海猴 2.0.11
Windows:
视窗：
- Internet Explorer 7
- Firefox 4.0.1
- 浏览器 7
- 火狐 4.0.1
If someone (I can't in my present situation) could test this on latestversions of IE, Firefox, Chrome, Safari and Opera and leave a comment or edit this answer, that would be awesome!
如果有人（在我目前的情况下我不能）可以在最新版本的 IE、Firefox、Chrome、Safari 和 Opera 上对此进行测试并发表评论或编辑此答案，那就太棒了！
回答by mouche
Set the width and height of the td tag using CSS. Then you need to deal with overflow.
使用 CSS 设置 td 标签的宽度和高度。然后你需要处理溢出。
td {
width: 40px;
height: 20px;
}
回答by Ian Selby
Assuming you don't have any non-breaking spaces or super-long text without a space in the cell, I've usually had the best luck by explicitly setting the width of said cell via CSS (seems to work better than doing something like "width='100'". If the data in the cell is just a really long string, there's not much you can do other than truncate it programatically, or wrap the data in a div with an explicit width and something like overflow: hidden / auto (auto if you want a horizontal scrollbar or something).
假设您没有任何不间断的空格或没有空格的超长文本，我通常会通过 CSS 显式设置所述单元格的宽度来获得最好的运气（似乎比执行类似的操作更好“width='100'”。如果单元格中的数据只是一个非常长的字符串，那么除了以编程方式截断它，或者将数据包装在一个具有显式宽度的 div 中以及诸如溢出之类的东西之外，您无能为力。 / 自动（如果你想要一个水平滚动条或其他东西，则自动）。
回答by Andrew Moore
Use overflow: hiddento hide the overflow as such:
使用overflow: hidden隐藏溢出这样：
td, th {
overflow: hidden;
}
For this to work, your <td>or <th>tags needs to be assigned a width.
为此，您的<td>或<th>标签需要指定宽度。
回答by thedz
If you must absolutelyhave the table maintain it's layout even in the face of non-breaking spaces, then you'll need to use:
如果即使面对不间断的空间，您也必须绝对让表格保持其布局，那么您需要使用：
overflow: hidden;
However, I'd recommend against it. IMO, it's more important to have the data readable than the layout perfect.
但是，我建议不要这样做。IMO，让数据可读比布局完美更重要。
