这种情况我碰到过好多次啦！问题出在HTML表格默认的table-layout: auto布局算法上——当某一列内容特别多的时候，浏览器会自动调整列宽来适应内容，哪怕你已经设置了百分比宽度，也会被“挤”变形。

下面给你几个靠谱的解决办法：

1. 启用固定表格布局（最推荐） #

给表格加上table-layout: fixed的CSS属性，这会让浏览器严格按照你设置的列宽来分配空间，不会被内容影响。同时记得保留表格的width: 100%设置，确保它占满容器。

修改后的代码示例：

<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0" style="table-layout: fixed;">
  <tr>
    <td width="7%"></td>
    <td width="21%"></td>
    <td width="32%"></td>
    <td width="20%"></td>
    <td width="20%" style="word-wrap: break-word; overflow-wrap: break-word;"></td>
  </tr>
</table>

这里给第5列加了word-wrap: break-word，是为了让超长内容自动换行，避免撑破列宽，确保它始终保持20%的宽度。

2. 用<colgroup>统一定义列宽（更规范） #

如果表格有多行，用<colgroup>集中设置列宽会更方便，不用每行重复定义：

<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0" style="table-layout: fixed;">
  <colgroup>
    <col width="7%">
    <col width="21%">
    <col width="32%">
    <col width="20%">
    <col width="20%">
  </colgroup>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td style="word-wrap: break-word; overflow-wrap: break-word;"></td>
  </tr>
</table>

这种方式的好处是列宽定义更集中，后期修改起来更省心。

3. 给列设置最小宽度兜底（备选方案） #

如果不想用固定布局，也可以给第4列加上min-width: 20%，强制浏览器至少保持这个宽度：

<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0">
  <tr>
    <td width="7%"></td>
    <td width="21%"></td>
    <td width="32%"></td>
    <td width="20%" style="min-width: 20%;"></td>
    <td width="20%" style="word-wrap: break-word; overflow-wrap: break-word;"></td>
  </tr>
</table>

不过这种方法不如固定布局稳定，当内容极端冗长时还是可能出现变形，所以优先推荐第一种方案。

总结一下：核心就是用table-layout: fixed让浏览器严格遵守你的列宽设置，再配合内容换行的CSS，就能保证第4和第5列始终保持20%的宽度啦！

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