固定宽度div位于td内时的奇怪行为

Question

这是我正在谈论的代码：

.box {
  background: rebeccapurple;
  height: 50px;
  width: 180px;
  border-radius: 6px;
  margin: 10px;
}

<table width="100%" border="1">
  <tr>
    <td>
      <div class="box"></div>
    </td>
    <td>Test</td>
  </tr>
</table>

在Chrome 75上运行时的外观如下：

http://jsfiddle.net/o198cx7j/

为什么第一栏这么长？如果我从div中删除了固定宽度，它将恢复正常：

首先，为什么会发生这种情况？？第二，如何进行这项工作？ 我想在div中使用固定宽度的td，它的行为必须与您使用非固定宽度的div一样。

我知道可以将固定宽度从div移到td 或使用 CSS网格，但是我使用表寻找替代解决方案。

Answer 1

之所以这样做是因为以下行：<table width="100%"。表格单元格宽度算法读取180px的固定宽度，并使用其内容按比例扩展第一个单元格（我不确定为什么）。如果删除width属性并向第二个单元格添加100％的宽度，则可以保持框的固定宽度并保留尺寸。

.second_cell{
   width: 100%;
}

.box {
  display: flex;
  background: rebeccapurple;
  height: 50px;
  width: 180px;
}

<table border="1">
  <tr height="200px">
    <td>
      <div class="box"></div>
    </td>
    <td class="second_cell">Test</td>
  </tr>
</table>

Answer 2

作为symlink答案的替代方法，您还可以指定每个td的宽度为50％。

---

关于发生这种情况的原因，我也同意symlink的回答，但是我想添加一些有关规范的信息：

按比例显示表格是如何按规范工作的（尽管规范在某些方面使用了“ may”之类的词，但浏览器应遵循规范，并在表述模糊时有自己的差异）。

  

但是，如果表格没有固定的宽度，则用户代理必须先接收所有表格数据，然后才能确定表格所需的水平空间。只有这样，该空间才能分配给比例列。

更多信息可以在规范中找到：Calculating the width of columns

因此，如果没有固定宽度的div，则两列的内容宽度均为“ 123”，因此它们的比例宽度为50％/ 50％。相对于“ 123”的宽度为180像素，它将按比例在列之间分配宽度。如果我们将像素从180px更改为90px，则比例会发生变化。如果我们在右栏中将“ 123”更改为“ 12345”，则比例也会随之改变。

Answer 3

首先，width=""已不再受表标签属性的支持。改用CSS设置宽度。

对于您的大小调整问题，表大小调整与div大小调整的工作方式不同。此问题的解决方案应为您工作：

Fixed width for table first column