时间戳

首页 > 解决方案 > table-layout:fixed 是否应该允许我指定单元格大小加起来比我的容器更大？

html - table-layout:fixed 是否应该允许我指定单元格大小加起来比我的容器更大？

问题描述

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

我有一个包含 div 设置为 900px 宽度的情况。

其中有一个表格，有 4 列，每列设置为 300px 宽度。

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

结果应该是第三列的右手边与div的右手边对齐，第四列从div中突围而出。

但是所有四列都显示在div 内，每列大约 225 像素。

我能做些什么来缓解这个问题？

谢谢！

标签： htmlcss

解决方案

display: table具有固定布局和自动宽度的流入块级表 ( ) 受规范第 10.3.3 节中指定的约束（尽管规范实际上允许浏览器完全跳过具有自动宽度的表的固定布局）。也就是说，适用于具有自动宽度的流入块框的相同约束——表格将仅与其包含块一样宽，并且任何边框、填充和边距都允许。

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

div {
  width: 900px;
  background-color: #ff0;
}

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

td {
  width: 300px;
}
<div>
  <table>
    <tr>
      <td>1 <td>2 <td>3 <td>4
  </table>
</div>

推荐阅读