表格列：宽度、最小宽度、自动换行和列“重要性”

Posted 2023-03-05

【中文标题】表格列：宽度、最小宽度、自动换行和列“重要性”

【英文标题】：Table columns: width, min-width, word wrapping and column "importance"

【发布时间】：2014-10-31 13:11:00

【问题描述】：

width: 100% 的表中有三列。

第 2 列和第 3 列应该是 width: 100px 无论如何 第 3 列应尽可能多（没有换行），仅此而已。 第 1 列应占用所有剩余空间。

JSFiddle：http://jsfiddle.net/o66czLtj/4/

请注意，第 1 列和第 4 列都没有指定 width，因此它们的宽度由浏览器自动计算。但是，我希望第 1 列是最重要的，并占用所有剩余空间，但只有在第 4 列能够在不换行的情况下呈现自身之后。

实际：

预期：

如何在不硬编码第一列或第四列的宽度的情况下实现这一点？仅使用 CSS 即可。

理由：第 4 列中的按钮数量未知。可能是 1，也可能是 4。

【问题讨论】：

你可以用.col1 width: 80% 做到这一点

你大概知道“delete”列的宽度，为什么不加上.col2和.col3的宽度呢？

如果.col4 有这么多按钮，需要大约40% 的桌子？ jsfiddle.net/9oxnu8km

【参考方案1】：

见this answer。如果给第 4 列width: 1px; white-space: nowrap;，那么它应该在不影响其内容的情况下占用最小空间。

.col4 
  width: 1px;
  white-space: nowrap;

【参考方案2】：

你能不能只添加

Float: right

到第 2 列和第 3 列？

见下面的小提琴:)

http://jsfiddle.net/r7b3hny7/

我想这就是你所追求的？

【讨论】：

是的！我不知道float 在桌子上是这样工作的。聪明的！如果没有更清洁的解决方案，我会接受这个答案。谢谢。

太棒了！ :) 老实说，在我尝试之前我也没有！哈哈！

真的吗？ :O 我在火狐上！

是的，我的 Firefox 不喜欢它。 Chrome 可以。