为什么设置table-layout:fixed和100%宽度的HTML表格列宽不生效？

table-layout: fixed的核心渲染规则是列宽仅由表格首行单元格或提前定义的<col>元素决定，后续所有行的宽度设置都不会影响最终列宽。
你当前表格的首行是跨2列的合并表头，浏览器解析首行时无法获取到单列的宽度分配规则，就会默认把总宽度均分给所有列，所以你在第二行表头设置的20%、80%比例不会生效。

使用<colgroup>配合<col>提前声明每列的宽度即可，不需要修改你现有的合并表头、table-layout: fixed配置和100%宽度要求，是符合HTML规范的标准实现。

修改后的完整代码如下：

<style>
  th, td { border: 1px solid black; }
  table {
    width: 100%;
    table-layout: fixed;
  }
</style>

<table>
  <!-- 列宽定义放在表格所有内容的最前面 -->
  <colgroup>
    <col style="width: 20%">
    <col style="width: 80%">
  </colgroup>
  <tr>
    <th colspan="2">100% united th</th>
  </tr>
  <tr>
    <th>20% th</th>
    <th>80% th</th>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

浏览器解析到<colgroup>时就会提前确定每列的宽度比例，后续渲染合并表头和普通单元格时都会遵循这个比例，不会再出现均分的问题。

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