Question

我认为table-layout:fixed的吸引力之一就是您可以将单元格宽度设置为您想要的任何内容，浏览器会盲目地接受它们。

我的情况是我将包含div设置为900px宽度。

它是一个表，有4列，每列设置为300px宽。

div具有背景颜色并设置为溢出：可见。

结果应该是第三列的右边缘与div的右边缘对齐，第四列从div中突然出现。

但相反，所有四列都显示里面 div，每个大约225px。

我该怎么做才能缓解这个问题？

谢谢！

Answer 1

这是预料之中的原因，因为对于您的示例，您需要为过低指定table的宽度才能生效。

在“固定”布局方法下，可以在下载和分析第一个表行后呈现整个表。这可以加快“自动”布局方法的渲染时间，但后续单元格内容可能不适合所提供的列宽。单元格使用overflow属性来确定是否剪切任何溢出内容，但仅当表格具有已知宽度时;否则，它们不会溢出细胞。

^MDN

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

div {
  width: 300px;
  margin: 1em auto;
  border: 1px solid red;
  text-align: center;
}

table {
  table-layout: fixed;
  width: 300px;
  border-collapse: collapse;
}

td {
  width: 100px;
  border: 1px solid green;
}

<div>
  <table>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
    </tr>
  </table>
</div>

Answer 2

具有固定布局和自动宽度的流内块级表（display: table）受section 10.3.3 of the spec中指定的约束（尽管规范实际为allows browsers to skip fixed layout altogether for tables with auto width）。也就是说，适用于具有自动宽度的流入块框的相同约束 - 该表将仅与其包含块一样宽，并且允许任何边框，填充和边距允许。

解决方法很简单：指定任何已知永远不会超过总列宽的任意表宽度 - 如果总列宽总是超过容器宽度，则指定100％宽度也适用：

＆＃13;

div {
  width: 900px;
  background-color: #ff0;
}

table {
  width: 100%;
  table-layout: fixed;
}

td {
  width: 300px;
}

＆＃13;

<div>
  <table>
    <tr>
      <td>1 <td>2 <td>3 <td>4
  </table>
</div>

＆＃13;

table-layout：fixed应该允许我指定的单元格大小加起来比我的容器宽吗？

2 个答案: