table-layout:fixed下带padding的百分比列宽计算规则咨询

核心结论：固定布局表格的列宽计算逻辑完全独立于flex、普通块级元素的盒模型规则，不会在分配百分比宽度前预先扣除单元格内边距，padding会直接参与列宽的缩放计算。

具体计算逻辑（基于CSS2.1标准固定表格布局算法） #

你观测到的宽度不符合flex布局下的预期，本质是两种布局的宽度分配逻辑完全不同，固定表格布局的计算步骤如下：

• 首先确定表格可用总宽度：如果表格设置了明确的width值（比如示例中的500px），会先扣除表格自身的横向border、所有单元格之间的border-spacing，得到所有列可占用的总宽度。
• 优先分配固定宽度列：所有设置了非百分比、非auto宽度的列，会直接拿到声明的宽度，从总可用宽度中扣除对应空间。
• 分配剩余宽度给百分比列、自动宽度列：
  1. 先统计所有百分比列的声明宽度总和，按比例给每个百分比列分配初始content宽度。比如示例中两个列都设width:50%，总可用宽度500px，初始每个列的content宽度会被设为250px。
  2. 关键差异步骤：浏览器会计算所有列的初始border-box总宽度（即上一步拿到的初始content宽度 + 单元格横向padding + 单元格横向border），如果这个总宽度超过了第一步算出的可用总宽度，会按「每个列的初始border-box宽度占总初始border-box宽度的比例」反向缩放，直到所有列的border-box宽度之和刚好等于可用总宽度。

对你的示例数值的验证 #

你测试得到的175.812px、118.188px偏差来自浏览器默认样式：

• 浏览器默认td带1px左右的内嵌边框，默认border-spacing为2px，会占用少量宽度
• 扣除默认样式占用的宽度后，可用总宽度约为494px
• 两个列的初始border-box宽度分别为：第一列250px(content) + 2px(border) = 252px，第二列250px(content) + 200px(padding) + 2px(border) = 452px，总初始宽度为704px
• 缩放系数为494 / 704 ≈ 0.7017，第一列最终border-box宽度为252 * 0.7017 ≈ 176.8px，第二列content宽度为452 * 0.7017 - 200 -2 ≈ 115px，和你观测到的数值基本一致，误差来自不同浏览器默认样式的细微差别。

和flex布局的逻辑差异 #

你在flex容器中得到的结果，是flex布局默认的flex-shrink: 1压缩逻辑+content-box盒模型共同作用的结果，和表格固定布局的核心区别是：flex的压缩计算会优先考虑子元素的content尺寸基准，而固定表格布局的缩放完全以列的初始border-box占比为依据，不会单独把padding拎出来预先扣除。

实现预期效果的方案 #

如果要实现「总宽度先扣除所有单元格padding，剩余宽度按百分比平分给单元格content」的效果，最稳妥无兼容问题的方案是：不要直接给td加padding，在td内部嵌套一个块级容器元素，把padding加在这个内层元素上，同时给td设置box-sizing: border-box按预期比例设置宽度即可，此时列宽计算不会受padding影响。
示例代码：

<table style="width:500px;table-layout:fixed;border-collapse:collapse;border-spacing:0">
  <tr>
    <td style="width:50%;padding:0">
      <div style="padding:0">ADSD</div>
    </td>
    <td style="width:50%;padding:0">
      <div style="padding:0 100px">SADDS</div>
    </td>
  </tr>
</table>

此时两个td的宽度均为250px，内层div的content宽度均为150px，和你在flex布局中得到的效果完全一致。

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