如何让单元格元素的宽度与较长的标题相同

Question

我应该在下面的代码中添加什么以使红色和蓝色矩形宽度相同？

得到的结果（Firefox下）

我想要的结果：

我在这个链接中搜索了很长时间的解决方案 https://drafts.csswg.org/css2/#table 但我还没找到怎么做

编辑：我不想在标题中换行

caption {
  width:fit-content; /* I keep this line!*/
  border: 1px solid blue
}

tr {
  border: 1px solid red;
}
table {
  border-collapse: collapse;
}

<table>
  <caption>
    the caption zone the caption zone the caption...
  </caption>
  <tr>
    <td>the td the td </td>
  </tr>
</table>

Answer 1

你必须删除 width:fit-content;来自标题 css。 然后你在 chrome 和 firefox 中都会有相同的行为。