CSS:在表格上设置最大宽度

Question

我正在用html生成应用程序日志,我偶然发现了一个相当恼人的问题.我有以下布局:

| Action | Result | File path           |

例如

| Copy | Success | C:\VeryVeryVeryLongF |
|      |         | ileName.txt          |

第1列和第2列仅显示短标签:其内容应保留在一行中.另一方面,第3列可能包含非常长的文件路径,如果它们不能适合单行,则应该跨越多行.

为了达到这个目的,我已经white-space: nowrap;在第一列和white-space: normal; word-break: break-all;最后一列使用了.此外,该表有width:100%.

这在Chrome和IE中很有用,但在Firefox中却不行:简而言之,我似乎无法找到一种方法来告诉Firefox 8.0不要放大表格的最后一列,而是让文本跨越多行.在我之前的例子中,Firefox打印

| Copy | Success | C:\VeryVeryVeryLongFileName.txt |

前两列中的文本可能会有所不同,因此我无法手动设置其宽度并使用table-layout: fixed.我也试过max-width在桌子上设置,并将其包装成一个div,但无济于事.

请参阅http://jsfiddle.net/GQsFx/6/获取真实示例=)如何让Firefox像Chrome一样？

Answer 1

这会有用吗？这似乎适用于jsfiddle.百分比基于前两个列,然后宽度自动第三个,表格布局:固定在表格上.

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;
}

Answer 2

使用这个CSS

.actions {
width:100%;
}
.actions tr td:nth-child(3) {
 width:200px;
 word-wrap:break-word;
  display:inline-block;
}