Question

我最近发现，table-layout:fixed的表可以与设置为列的任何单位一起使用。（绝对的或相对的）

我的scss非常简单：我混合了px和％

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid;

  &:nth-child(1) {
    width: 150px;
  }
  &:nth-child(2) {
    width: 150px;
  }
  &:nth-child(3) {
    width: 200%;
  }
  &:nth-child(4) {
    width: 100%;
  }
}

所以即使列宽度总结超过表格的宽度 - 它也可以正常工作。我试图在w3c中搜索这种魔法的解释，但只发现了这个

任何剩余的列均等地划分剩余的水平表空格（减去边框或单元格间距）。

关于剩下的这些话，但不是我的情况下的溢出。请帮我在标准中找到这种行为的解释，因为我将在我的项目中使用它，但我不确定它不是一个bug或其他什么。

链接到小提琴https://jsfiddle.net/chesminsky/ga3ev2ex/

PS：对不起我的英文

Answer 1

这不是一个错误。你所看到的叫做包装

如果您想更改，可以在CSS中指定

white-space: nowrap;

我修复了你的例子，因为你可以在一行中看到它。

JS fiddle

Answer 2

在设置了像素的单元格之后，剩余空间将在3：rd列中分为200％，在第4列中分为100％。

这意味着剩下2/3和1/3，所以如果你要将第3和第4列改为66％和33％，你最终会得到相同的最终结果，但如果你制作那些像素宽度，它们要么是水平滚动溢出，要么是与总宽度的像素宽度百分比相比的拉伸。

所发生的情况是，在计算带有百分比的宽度之前，2列及其组合宽度会从容器总宽度中消失，因为像素宽度具有更高的优先级是固定大小的单位。

Src：https://www.w3.org/TR/CSS21/tables.html#width-layout

使用混合px和％固定的表格布局

2 个答案: