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

Question

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

16

我正在生成 HTML 格式的应用程序日志，但遇到了一个相当烦人的问题。我的布局如下:

| Action | Result | File path           |

例如

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

第一列和第二列仅显示短标签：其内容应保持在单行上。另一方面，第三列可以包含非常长的文件路径，如果无法适合于一行，则应跨越多行。

为了实现这一点，我在前两列中使用了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？

- Clément

此外，word-wrap: break-word 无效。 - Clément

相关链接：https://dev59.com/A3M_5IYBdhLWcg3wt1rD，https://dev59.com/IEXRa4cB1Zd3GeqPqlG3 - Clément

1

好的，现在我们已经更新到FireFox22了，看起来你的jsfiddle显示正常。 - Gerrat

6个回答

0

使用这个 CSS。

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

- pravin

1

你正在使用第三列的固定大小，这并不能满足我的需求：我需要第三列尽可能宽。 - Clément

-1

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

- Aditya Kumar

2

那不是原帖所要求的。 - Anish Gupta

-1

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

- Frederick Marcoux

那并没有改变任何事情 :/ - Clément

哦，糟糕！我不知道为什么，抱歉！ - Frederick Marcoux

-1

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

- Sheldon Griffin

这不是最优的：所有列最终占用相同的空间，而前两列可以缩小而不破坏它们的内容，为最后一列提供更多的空间。 - Clément

-1

这应该可以工作：

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

- Mike Lin

我不想为第三列指定最大宽度，因为网页可能在各种不同尺寸的显示器上查看... - Clément

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- keithwyland · Accepted Answer

这个能行吗？在jsfiddle上看起来是可以的。前两列使用百分比，第三列使用自动宽度，同时将table-layout设置为fixed。

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