Safari中固定列宽表格遇文本换行宽度失效问题求助

问题 #

设置列宽120px的表格，总宽度应为3×120=360px，该设置在Chrome、Firefox中正常生效，但Safari浏览器里，当单元格文本超出列宽需要换行时，列宽和表格宽度会被内容撑开，完全忽略120px的固定列宽设置。由于组件需要支持用户动态调整列宽，手动设置表格总宽度的方案不可行，需要找到和其他浏览器表现一致的解决方法。

解决方案 #

核心是给表格添加table-layout: fixed属性，同时确保表头和单元格宽度统一，调整换行属性适配Safari的渲染逻辑：

• 给table设置table-layout: fixed，强制按指定列宽布局，而非根据内容自动调整
• 让td继承表头的宽度设置，保证列宽一致性
• 使用overflow-wrap: break-word确保文本在Safari中正常换行

修改后的代码示例 #

CSS #

table {
  border-spacing: 0px;
  table-layout: fixed; /* 关键属性，强制固定列宽布局 */
}

th {
  width: 120px;
  padding: 0px;
}

th, td {
  border: 1px solid grey;
  width: inherit; /* 单元格继承表头宽度 */
  overflow-wrap: break-word; /* 兼容Safari的文本换行 */
}

HTML #

带换行文本的表格:
<table>
  <tr>
    <th>名称</th>
    <th>联系人</th>
    <th>国家</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
    
<br>
无换行文本的表格:
<table>
  <tr>
    <th>名称</th>
    <th>联系人</th>
    <th>国家</th>
  </tr>
  <tr>
    <td>Alfreds</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

原理说明 #

table-layout: fixed会让表格优先使用指定列宽布局，无需等待内容加载完成再计算宽度，既解决了Safari的适配问题，还能提升渲染性能。让td继承th宽度保证了表头与数据列的宽度统一，overflow-wrap: break-word则确保长文本不会撑破列宽，在Safari中正常换行。

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