HTML固定布局表格仅一行宽度设置不生效问题求助

问题根源 #

table-layout: fixed的核心渲染逻辑是仅以表格第一行（包括thead的行）的单元格宽度作为整列的宽度基准，后续所有行的单元格宽度设置都会被浏览器直接忽略——这就是你第二行宽度不生效的原因。

可行解决方案 #

方案1：用colspan拆分/合并单元格（原生表格最佳方案） #

通过定义细粒度的列组，再用colspan合并单元格来模拟不同行的宽度比例，同时保留table-layout: fixed的特性：

<table style="table-layout: fixed; width: 100%; border-collapse: collapse;">
  <!-- 定义基础列组，拆分到能满足两行的宽度比例 -->
  <colgroup>
    <col style="width: 30%">
    <col style="width: 20%">
    <col style="width: 25%">
    <col style="width: 20%">
    <col style="width: 5%">
  </colgroup>
  <!-- 第一行：50%（30%+20%）、45%（25%+20%）、5% -->
  <tr>
    <td style="border: 1px solid #000;" colspan="2">50%</td>
    <td style="border: 1px solid #000;" colspan="2">45%</td>
    <td style="border: 1px solid #000;">5%</td>
  </tr>
  <!-- 第二行：30%、20%、50%（25%+20%+5%） -->
  <tr>
    <td style="border: 1px solid #000;">30%</td>
    <td style="border: 1px solid #000;">20%</td>
    <td style="border: 1px solid #000;" colspan="3">50%</td>
  </tr>
</table>

方案2：单元格内嵌套div控制内容宽度 #

如果不需要改变原生表格的列宽，只是想让每行内容呈现不同宽度，可以在单元格里嵌套div，独立控制内容的宽度：

<table style="table-layout: fixed; width: 100%; border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid #000;">
      <div style="width: 50%;">50%</div>
    </td>
    <td style="border: 1px solid #000;">
      <div style="width: 45%;">45%</div>
    </td>
    <td style="border: 1px solid #000;">
      <div style="width: 5%;">5%</div>
    </td>
  </tr>
  <tr>
    <td style="border: 1px solid #000;">
      <div style="width: 30%;">30%</div>
    </td>
    <td style="border: 1px solid #000;">
      <div style="width: 20%;">20%</div>
    </td>
    <td style="border: 1px solid #000;">
      <div style="width: 50%;">50%</div>
    </td>
  </tr>
</table>

这个方案的优势是不需要调整表格的列结构，快速实现内容宽度自定义。

方案3：用CSS Grid替代原生表格 #

如果你的场景不依赖原生表格的特殊特性（比如单元格自动对齐、rowspan跨行等），CSS Grid可以更灵活地实现不同行的宽度设置，同时保持类似表格的布局：

.table-grid {
  display: grid;
  width: 100%;
  gap: 0; /* 模拟表格边框无间隙 */
}
/* 第一行列宽 */
.table-grid.row-1 {
  grid-template-columns: 50% 45% 5%;
}
/* 第二行列宽 */
.table-grid.row-2 {
  grid-template-columns: 30% 20% 50%;
}
.table-grid > div {
  border: 1px solid #000;
}

<div class="table-grid row-1">
  <div>50%</div>
  <div>45%</div>
  <div>5%</div>
</div>
<div class="table-grid row-2">
  <div>30%</div>
  <div>20%</div>
  <div>50%</div>
</div>

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