使用列宽的表格元素宽度 - Safari答案

【问题标题】：Table element width using column widths - Safari使用列宽的表格元素宽度 - Safari
【发布时间】：2022-11-09 06:00:02
【问题描述】：

我有一个表格元素，其列宽设置为120px。表格元素宽度通过聚合所有列宽自动计算：3 x 120 = 360px。这似乎在所有浏览器中都可以正常工作，但是在苹果浏览器当我将文本插入其宽度超过列宽（并且需要换行）的单元格之一时 - 所有列和表的宽度似乎都在扩展并忽略 120px 列宽。如果未设置宽度限制，扩展似乎与表格宽度的长度直接相关。

Chrome 和 Firefox 似乎尊重预设的列宽，并且当单元格包含文本时不会扩展它们。

我不太确定这是否是 Safari 错误，但理想情况下希望找到一种方法让它像在其他浏览器中一样工作。

请注意，我发现解决此问题的一种方法是手动设置表格宽度，但是我无法使用此解决方案，因为我的组件促进了允许用户动态控制列宽的功能，因此我想找到一个就像在其他浏览器中一样自动设置表格宽度的方法。

table {
  border-spacing: 0px;
}

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

th, td {
  border: 1px solid grey;
  word-wrap: anywhere;
}

Table with wrapping text:
<table>
  <tr>
    <th>Name</th>
    <th>Contact</th>
    <th>Country</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 with no wrapping text:
<table>
  <tr>
    <th>Name</th>
    <th>Contact</th>
    <th>Country</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>

【问题讨论】：

标签： html css safari

【解决方案1】：

我可以通过将table-layout: fixed 和width: min-content 属性添加到table 样式标签中来解决这个问题。

此外，不再需要 word-wrap: anywhere 属性，因为上述属性强制单元格在所有浏览器中自动换行文本。

值得注意的是，width: fit-content 无法使用，因为它会导致表格的宽度扩展到 Firefox 中的父元素宽度，从而造成跨浏览器行为的另一个不一致。但是，width: max-content 可以用作有效的替代品。

table {
  border-spacing: 0px;
  /* solution */
  table-layout: fixed;
  width: min-content;
}

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

th, td {
  border: 1px solid grey;
  /* no longer need this
    word-wrap: anywhere; */
}

<table>
  <tr>
    <th>Name</th>
    <th>Contact</th>
    <th>Country</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 with no wrapping text:
<table>
  <tr>
    <th>Name</th>
    <th>Contact</th>
    <th>Country</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>

【讨论】：