html - 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。基于前两个 cols 的百分比，然后 width auto 第三个，table-layout: fixed on the table。

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