javascript - 表格列 : width, 最小宽度，自动换行和列 "importance"

Question

我在 width: 100% 的表格中有三列。

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

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

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

实际:

预期:

如何在不对第 1 列或第 4 列的宽度进行硬编码的情况下实现这一目标？仅使用 CSS 即可。

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

Answer 1

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

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