如何阻止100%宽度HTML表格列导致其他列不必要文本换行

现有一个宽度设置为100%的三列HTML表格，中间列宽度设为100%。表格基础功能可正常使用，但会强制左右两列内容自动换行——即便屏幕有充足空间可以完整展示左右列内容，完全不需要换行。例如下图场景：屏幕空间足够完整显示“South America”和第三列的全部内容，但中间列的宽度设置强制这两列内容发生了换行。

复现代码 #

<table style="width: 100%;" border="1">
<tr>
    <td>South America</td>
    <td style="width: 100%;">Green Beans</td>
    <td>$25,000 per kg</td>
</tr>
</table>

实现约束 #

• 禁止使用HTML原生nowrap属性实现效果
• table-layout: fixed方案实际表现不符合预期，不采用
• 需要符合Web规范的可靠实现方案

直接给左右两列的<td>加上width: max-content的样式即可。
这是CSS标准定义的尺寸属性，作用是让元素宽度匹配内容的最大固有宽度，不会被中间列的100%宽度设置挤压换行，中间列会自动占满表格扣除左右列内容宽度后的所有剩余空间，完全遵循自动表格布局的计算规则，不需要修改table-layout属性，也不需要用到禁用的nowrapHTML属性。
调整后可直接运行的代码：

<table style="width: 100%;" border="1">
<tr>
    <td style="width: max-content;">South America</td>
    <td style="width: 100%;">Green Beans</td>
    <td style="width: max-content;">$25,000 per kg</td>
</tr>
</table>

如果需要兼容IE11这类不支持max-content的老旧浏览器，可以给左右列替换为width: 1%; white-space: nowrap;的样式：自动表格布局下1%的宽度设置会被浏览器按内容最小宽度修正，配合不换行样式可以实现完全一致的效果，且这里用的是CSS的white-space属性，不属于被禁止的HTML原生nowrap属性。

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