如何使表格单元格宽度与较长caption一致？附代码示例

需要实现红色的tr边框与蓝色的caption边框宽度相同，同时保留caption的width:fit-content属性且caption内容不换行。当前Firefox下两者宽度不一致，期望让两者宽度匹配。

解决方案 #

核心思路是让表格宽度跟随caption的内容宽度，具体需要添加两个CSS规则：

• 给table设置width: fit-content;，让表格宽度适配内容（这里就是不换行的caption宽度）
• 给caption设置white-space: nowrap;，强制标题内容不换行，确保width:fit-content能正确计算为内容的完整宽度

修改后的完整代码 #

CSS代码

caption {
  width: fit-content; /* 保留该行 */
  border: 1px solid blue;
  white-space: nowrap; /* 确保标题不换行 */
}

tr {
  border: 1px solid red;
}
table {
  border-collapse: collapse;
  width: fit-content; /* 让表格宽度匹配caption */
}

HTML代码（无需修改）

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

添加上述规则后，表格会自动适配caption的宽度，tr的红色边框就会和caption的蓝色边框宽度完全一致，同时满足caption不换行且保留width:fit-content的要求。

内容的提问来源于stack exchange，提问作者oceanGermanique