Html CSS：在表格上设置最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8487447/
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
CSS: Set a maximum width on a table
提问by Clément
I'm generating application logs in html, and I've stumbled across a rather annoying problem. I have the following layout :
我在 html 中生成应用程序日志，但我偶然发现了一个相当烦人的问题。我有以下布局：
| Action | Result | File path |
For example
例如
| Copy | Success | C:\VeryVeryVeryLongF |
| | | ileName.txt |
Columns 1 and 2 only display short labels : their contents should stay on one single line. On the other hand, column 3 may contain very long file paths, which should span multiple line if they can't fit on a single line.
第 1 列和第 2 列仅显示短标签：它们的内容应保留在一行上。另一方面，第 3 列可能包含很长的文件路径，如果它们不能放在一行中，则应该跨越多行。
To achieve this, I've used white-space: nowrap;on the first columns, and white-space: normal; word-break: break-all;on the last. Also, the table has width:100%.
为了实现这一点，我white-space: nowrap;在第一列和white-space: normal; word-break: break-all;最后一列上使用过。此外，该表具有width:100%.
This works great in Chrome and IE, but not in Firefox : In short, I can't seem to find a way to tell Firefox 8.0 to not enlarge the last column of the table, and instead let the text span multiple lines. In my previous example, Firefox prints
这在 Chrome 和 IE 中效果很好，但在 Firefox 中无效：简而言之，我似乎找不到一种方法来告诉 Firefox 8.0 不要放大表格的最后一列，而是让文本跨越多行。在我之前的例子中，Firefox 打印
| Copy | Success | C:\VeryVeryVeryLongFileName.txt |
The text in the first two columns may vary, so I can't set their width manually and use table-layout: fixed. I've also tried setting max-widthon the table, and wrapping it in a div, to no avail.
前两列中的文本可能会有所不同，因此我无法手动设置它们的宽度并使用table-layout: fixed. 我也试过max-width把它放在桌子上，然后用一个包裹起来div，但无济于事。
See http://jsfiddle.net/GQsFx/6/for a real-life example =) How can I make Firefox behave like Chrome?
有关真实示例，请参阅http://jsfiddle.net/GQsFx/6/=) 如何让 Firefox 表现得像 Chrome？
回答by keithwyland
Will this work? This appears to work with the jsfiddle. Percentage based first two cols, then width auto the third, with table-layout: fixed on the table.
这会起作用吗？这似乎适用于 jsfiddle。基于前两个列的百分比，然后是第三个自动宽度，表格布局：固定在表格上。
http://jsfiddle.net/keithwyland/uuF9k/1/
http://jsfiddle.net/keithwyland/uuF9k/1/
.actions {
width:100%;
table-layout: fixed;
}
.actions tr td {
white-space: nowrap;
width: 15%;
}
.actions tr td:nth-child(3) {
white-space: normal;
word-break: break-all;
word-wrap: break-word;
width: auto;
}
回答by pravin
use this css
使用这个 css
.actions {
width:100%;
}
.actions tr td:nth-child(3) {
width:200px;
word-wrap:break-word;
display:inline-block;
}
回答by Aditya Kumar
max-width is valid CSS2 but only supported in NS7, Opera 7 and probably Mozilla. I don't believe it's supported in IE 6.
max-width 是有效的 CSS2，但仅在 NS7、Opera 7 和可能的 Mozilla 中受支持。我认为 IE 6 不支持它。
回答by Frederick Marcoux
Try putting width: auto;. This will tell to the browser to use the needed space...
尝试放置width: auto;。这将告诉浏览器使用所需的空间...
回答by Mike Lin
this should work:
这应该有效：
.actions tr td:nth-child(3) {
white-space: normal;
word-break: break-all;
max-width:200px;
}
回答by Sheldon Griffin
The following CSS seems to get it to work for me. Note the addition of table-layout:fixed, and the use of word-wrap: break-word.
以下 CSS 似乎让它为我工作。注意添加了 table-layout:fixed，以及 word-wrap:break-word 的使用。
.actions {
width:100%;
table-layout:fixed;
}
.actions tr td {
white-space: nowrap;
}
.actions tr td:nth-child(3) {
white-space:normal;
word-wrap: break-word;
}
