如何制作百分比宽度HTML表格？15%宽度单元格异常求助

你设置的width:15%是相对于整个表格的宽度，而非所在列的宽度。由于表格开启了table-layout: fixed，单元格宽度默认基于表格总宽度计算，导致每个A单元格占了表格总宽度的15%，远大于单列表格宽度（25%）的15%比例。

提供两种简单的修正方式：

方式1：计算绝对宽度比例 #

单列占表格总宽度的25%，A单元格要占列宽的15%，对应表格总宽度的25% * 15% = 3.75%。将A单元格的width改为3.75%，B单元格会自动占据剩余的21.25%（单列宽度减去A的宽度）：

<table style="width: 100%; table-layout: fixed; border: 1px solid black; border-collapse: collapse;">
  <tr>
    <td colspan="2" style="border: 1px solid black;width: 25%;">列1</td>
    <td colspan="2" style="border: 1px solid black;width: 25%;">列2</td>
    <td colspan="2" style="border: 1px solid black;width: 25%;">列3</td>
    <td colspan="2" style="border: 1px solid black;width: 25%;">列4</td>
  </tr>
  <tr>
    <td style="width: 3.75%; border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
    <td style="width: 3.75%; border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
    <td style="width: 3.75%; border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
    <td style="width: 3.75%; border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
  </tr>
</table>

方式2：嵌套表格（逻辑更直观） #

把每一列做成嵌套表格，此时A单元格的width:15%会基于父列的宽度计算，无需手动换算比例：

<table style="width: 100%; table-layout: fixed; border: 1px solid black; border-collapse: collapse;">
  <tr>
    <td style="width: 25%; border: 1px solid black;">
      <table style="width: 100%; border-collapse: collapse;">
        <tr><td colspan="2" style="border: 1px solid black;">列1</td></tr>
        <tr>
          <td style="width: 15%; border: 1px solid black;">A</td>
          <td style="border: 1px solid black;">B</td>
        </tr>
      </table>
    </td>
    <td style="width: 25%; border: 1px solid black;">
      <table style="width: 100%; border-collapse: collapse;">
        <tr><td colspan="2" style="border: 1px solid black;">列2</td></tr>
        <tr>
          <td style="width: 15%; border: 1px solid black;">A</td>
          <td style="border: 1px solid black;">B</td>
        </tr>
      </table>
    </td>
    <td style="width: 25%; border: 1px solid black;">
      <table style="width: 100%; border-collapse: collapse;">
        <tr><td colspan="2" style="border: 1px solid black;">列3</td></tr>
        <tr>
          <td style="width: 15%; border: 1px solid black;">A</td>
          <td style="border: 1px solid black;">B</td>
        </tr>
      </table>
    </td>
    <td style="width: 25%; border: 1px solid black;">
      <table style="width: 100%; border-collapse: collapse;">
        <tr><td colspan="2" style="border: 1px solid black;">列4</td></tr>
        <tr>
          <td style="width: 15%; border: 1px solid black;">A</td>
          <td style="border: 1px solid black;">B</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

补充说明 #

• 两种方式都能实现需求：方式1代码更简洁，方式2逻辑更清晰，适合后续维护。
• 添加border-collapse: collapse可合并边框，避免出现双层边框问题。

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