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; 在最后。此外，表格的宽度为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;
}

Answer 3

max-width 是有效的 CSS2，但仅在 NS7、Opera 7 和可能的 Mozilla 中受支持。我不相信 IE 6 不支持它。

Answer 4

尝试输入 width: auto;。这将告诉浏览器使用所需的空间......

Answer 5

这应该有效：

    .actions tr td:nth-child(3) {
         white-space: normal;
         word-break: break-all;
         max-width:200px;
     }

Answer 6

下面的 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;
}