HTML表格设计：能否让某一行宽度大于其他行？

可行，虽然违背表格默认的列宽统一逻辑，但可以通过两种方式实现需求：

方法一：嵌套表格（兼容性最优） #

保留外层500px宽度的表格承载页眉和页脚，在主体行的单元格内嵌套一个1000px宽度的表格并设置居中，就能让主体内容突破外层表格的宽度限制。代码示例：

<table width="500px" align="center">
  <tr> ... header ... </tr>
  <tr>
    <td>
      <table width="1000px" align="center">
        <!-- 主体内容 -->
      </table>
    </td>
  </tr>
  <tr> ... footer ... </tr>
</table>

外层表格负责固定页眉页脚的500px宽度并整体居中，嵌套表格承载主体内容，宽度设为1000px后居中显示，视觉上就会比页眉页脚宽。

方法二：CSS样式突破宽度限制 #

如果不想嵌套表格，可以通过CSS将主体单元格设置为块级元素，强制设置宽度并居中。代码示例：

<style>
  .main-content {
    width: 1000px;
    margin: 0 auto;
    display: block;
  }
</style>
<table width="500px" align="center">
  <tr> ... header ... </tr>
  <tr>
    <td class="main-content">
      <!-- 主体内容 -->
    </td>
  </tr>
  <tr> ... footer ... </tr>
</table>

通过display:block把表格单元格转换成块级元素，再设置宽度和自动外边距实现居中，就能让主体内容超出外层表格的500px宽度。

注意事项 #

• 嵌套表格的方式对老旧浏览器兼容性更好，适合需要兼容低版本IE的场景；
• 外层表格一定要加align="center"，避免页眉页脚左对齐、主体居中的视觉不协调问题。

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