已设置宽度的HTML表格仍被拉伸，如何修复？

问题核心原因 #

1. 表格设置了width="100%"，强制表格占满父容器宽度，直接覆盖单元格的固定宽度设置，导致单元格被拉伸变形。
2. 未明确定义表格每一列的宽度，浏览器会自动分配空间，打乱预设布局。
3. 最后一行的单元格存在colspan与width的逻辑冲突（比如width="100"却搭配colspan="2"），浏览器无法正确解析宽度要求。

修复后的代码 #

<center>
<table border="0" width="1000">
  <!-- 定义每一列的宽度，共10列，每列100px -->
  <col width="100">
  <col width="100">
  <col width="100">
  <col width="100">
  <col width="100">
  <col width="100">
  <col width="100">
  <col width="100">
  <col width="100">
  <col width="100">
  
  <tr>
    <td></td>
    <td align="center" valign="top" colspan="8" bgcolor="#000000" bordercolor="#FFFFFF">
      <p align="center"><font color="#FFFFFF" face="Arial">Table title</font></p>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td align="center" valign="top" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="1" style="text-decoration: none"><font face="Arial">1</font></a></p></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="2" style="text-decoration: none"><font face="Arial">2</font></a></p></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="3" style="text-decoration: none"><font face="Arial">3</font></a></p></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="4" style="text-decoration: none"><font face="Arial">4</font></a></p></div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td align="center" valign="top" colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="5" style="text-decoration: none"><font face="Arial">5</font></a></p></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="6" style="text-decoration: none"><font face="Arial">6</font></a></p></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="7" style="text-decoration: none"><font face="Arial">7</font></a></p></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="8" style="text-decoration: none"><font face="Arial">8</font></a></p></div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td align="center" valign="top" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="9" style="text-decoration: none"><font face="Arial">9</font></a></p></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="10" style="text-decoration: none"><font face="Arial">10</font></a></p></div>
    </td>
    <td align="center" valign="top" colspan="2" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div><p align="center"><a href="link url" title="11" style="text-decoration: none"><font face="Arial">11</font></a></p></div>
    </td>
    <td align="center" valign="top" bgcolor="#F0F0F0" bordercolor="#FFFFFF">
      <div></div>
    </td>
    <td></td>
  </tr>
</table>
</center>

关键修复点 #

• 把表格的width="100%"改成固定总宽度1000（对应10列×100px），避免表格被容器拉伸。
• 添加<col>标签明确每一列的宽度为100px，colspan="2"的单元格自动变为200px，符合需求。
• 移除单元格上多余的width属性，避免和colspan冲突，让浏览器只根据列宽和colspan计算单元格宽度。
• 保留<center>标签让表格在页面中居中，固定宽度不会导致过度拉伸。

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