代码之家 › 专栏 › 技术社区 › ashish singh

为什么table layout:fixed会影响父元素的宽度?

html-table css3 css html

ashish singh · 技术社区 · 8 年前

有人能解释一下为什么 div table-layout:fixed 正在更改其父元素的宽度( body 在这种情况下)使它100%时,它不应该是100%,因为它的定位?

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 80%; /* Any percentage value different from 0 */
  table-layout:fixed;
  outline: 2px solid blue;
}

<div class="c">d</div>

正如您在上面看到的,添加 表-布局:固定 强制主体为全宽和百分比 width 上将相对于的 身体 !

下面的代码片段并非如此,其行为在某种程度上是合乎逻辑和直观的:

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 80%;
  /* table-layout:fixed; */
  outline: 2px solid blue;
}

<div class=“c”>d</div>

怎么会呢 表-布局:固定

宽度 产生逻辑结果:

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 200px; 
  table-layout:fixed;
  outline: 2px solid blue;
}

我们也可以有一些溢出 奇怪的 行为:

body {
 margin:0;
 position:relative;
 width:300px;
 border-top:20px solid green;
}

.container {
  border: 2px solid red;
  height: 100vh;
  position: absolute;
}

.c {
  display: table;
  width: 120%; 
  table-layout: fixed;
  outline: 2px solid blue;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from{width:1%;}
  to {width:150%}
}

<div class="container">
  <div class="c">d</div>
</div>

3 回复 | 直到 8 年前

Community Mohan Dere 6 年前

看起来像 you're not the first to bring this up . 你可能是第二个。

明确地说,这是两个问题的结合:

问题2是 pretty easy to write off :

实现同意不多次计算两个元素的宽度。

即 身体 使用“收缩以适合”调整大小,然后将表设置为该宽度的80%,并且是 "not computed again" . 唯一的“不确定”是规范不要求或不允许,或者确实不关心实现做什么。

因此,问题就归结为,在确定#2中表的大小之前,收缩匹配在#1中产生“尽可能宽”的结果。以下是规范如何描述“收缩以适合未放置元素”:

[...] 粗略地:通过格式化内容而不是显式换行来计算首选宽度,同时计算首选宽度 最低限度 宽度,例如,尝试所有可能的换行符。css2.1没有定义确切的算法。第三,计算 可用宽度

然后收缩以适应宽度为:min(max(首选最小宽度,可用宽度),preferred width)。

那个

根据 David Baron (来自同一条线),研究壁虎的人:

固定布局表将内部最大内容内联大小报告为无穷大。

(请注意,“最大内容内联大小”与“首选宽度”的含义相同)

这就是我们的答案。与自动布局表相比,固定布局表的无限最大内容内联大小是导致此表的绝对位置的父级被拉伸到其自身包含块(初始包含块)所允许的宽度的原因。

而且,至少现在,这是我将得到的官方来源,因为我很难通过阅读css-size-3得出相同的结论,我不确定David的声明是基于Gecko的行为,还是基于所有实现的行为,还是基于特定的行为。

Community Mohan Dere 6 年前

这是我基于上述问题的解释,因此可以将其视为基于对“官方资源”的赏金要求。

什么时候? 应用时,内容不再指示布局,而是浏览器使用从表的第一行定义的任何宽度来定义列宽。如果第一行没有宽度,则不管单元格内的内容如何,列宽在表中平均分配。

source

一次 table-layout:fixed; 在父容器没有任何设置宽度的情况下应用它将把它的父容器(无论容器是body/div/etc)扩展到100%,并采用相对于父容器的指定宽度(在本例中为80%)。

table-layout:fixed 没有应用,因为它没有定义的宽度,尽管它是在CSS中设置的, table-layout:auto 默认情况下应用:

body {
  border: 2px solid red;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
}

.c {
  display: table;
  table-layout: fixed;
  /* width: 80%; */
  outline: 2px solid blue;
}

<div class="c">d</div>

现在让我们设置宽度:

body {
  border: 2px solid red;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
}

.c {
  display: table;
  table-layout: fixed;
  width: 80%;
  outline: 2px solid blue;
}

-2

Gibolt 8 年前

在第二个例子中,

body {
  border   : 2px solid red;
  height   : 100vh;
  margin   : 0;
  padding  : 0;
  position : absolute;

}

.c {
  display : table;
  width   : 80%;
  outline : 2px solid blue;
  /* table-layout : fixed; */
}

你已经完全定位了身体,所以它已经脱离了正常的流程,它不会影响它的定位或大小 .c 孩子。

所以 .c 并不像你最初预期的那样有80%的身体。

但是,您可以使用像素或vw等单位来设置结果会更直观,比如 this .

.c {
  display : table;
  width   : 80vw; 
  outline : 2px solid blue;
  /* width : 80%;  */
  /* table-layout : fixed; */
}

同样,当你使用 table-layout:fixed; 您的浏览器使用一种算法来计算表格的宽度,这类似于使用像素或vw等单位来计算表格的宽度。

到 quote from the W3C spec

17.5.2.1固定表格布局使用此(快速)算法,表格的水平布局不取决于单元格的内容。。。