CSS fixed布局表格如何实现首列限宽70%且其余列保最小宽度

直接绕开原生表格单元格的宽度约束冲突，用colgroup定义列规则+首列内部容器做溢出限制的组合实现，不需要额外JS，兼容所有主流浏览器：

<table style="width:100%; table-layout:auto; font-size: 60px; border-collapse: collapse;" border=2>
  <colgroup>
    <col style="width: 70%">
    <col style="width: 15%; min-width: 120px"> <!-- 120px替换为你需要的第二列最小宽度 -->
    <col style="width: 15%; min-width: 120px"> <!-- 120px替换为你需要的第三列最小宽度 -->
  </colgroup>
  <tr>
    <td>
      <div style="max-width: 100%; overflow: hidden; white-space: nowrap;">
        Don't expand if the text overflows, but shrink if not enough space
      </div>
    </td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>

你遇到的约束冲突来自W3C表格布局的原生规则：table-layout: fixed模式下宽度计算完全忽略单元格内容的min-width约束，table-layout: auto模式下直接给td设置max-width不会被纳入宽度计算优先级。上述方案绕开了直接给td加约束的思路：

• 表格改用table-layout: auto模式，这个模式下<col>标签上设置的min-width会被正常识别，宽度计算时会优先满足带min-width列的宽度要求，空间不足时自动压缩无最小宽度限制的首列。
• 首列的col只设置基础width: 70%，不设最小宽度限制，允许被自由压缩；首列内部套一层div做内容承载，设置max-width: 100%+溢出隐藏，因为td在auto布局下的最大宽度就是表格总宽度的70%，内部div自然不会超过这个宽度，彻底避免首列内容过长撑破宽度比例。
• 第二、第三列的col设置基础比例宽度+你需要的最小宽度，宽屏场景下三列严格按照70%/15%/15%的比例分配宽度，和原fixed布局表现完全一致。

• 宽屏状态下首列默认占70%宽度，文本溢出时自动隐藏不换行，和原有代码表现一致
• 首列无论内容多长，宽度永远不会超过总宽度的70%
• 窗口缩小时，第二、第三列会始终保持你设置的最小宽度，总空间不足时优先压缩首列宽度，不会出现后两列被挤扁的情况
• 如果后续需要给首列也加最小宽度，直接给首列的col标签加对应min-width属性即可，逻辑完全兼容

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