如何仅用HTML创建指定表格？解决soldby与date列宽度不等问题

你的问题源于表格默认采用auto布局，该布局会根据内容及其他行的单元格分布自动调整宽度，导致同样设置colspan="10"的soldby和date列宽度不一致。无需硬编码padding，推荐使用table-layout: fixed强制表格按预设列比例分配宽度，完美解决问题。

修改后的代码 #

CSS代码 #

table {
  border-spacing: 0;
  table-layout: fixed; /* 核心属性，启用固定布局 */
  width: 500px; /* 与表格总宽度保持一致 */
}

table, td {
  border: 1px solid black;
  height: 20px;
}

HTML代码 #

<table>
  <thead>
    <tr style="text-align: center;">
      <td colspan="10">soldby</td>
      <td colspan="10">date</td>
    </tr>
  </thead>
  <thead>
    <tr>
      <td colspan="20">name</td>
    </tr>
    <tr>
      <td colspan="20">Address</td>
    </tr>
  </thead>
  <tr>
    <td colspan="4">Cash</td>
    <td colspan="4">Change</td>
    <td colspan="4">COD</td>
    <td colspan="4">On Acct</td>
    <td colspan="4">Estimate</td>
  </tr>
  <tr>
    <td colspan="3"></td>
    <td colspan="13"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td colspan="20">recivedby</td>
  </tr>
</table>

原理说明 #

• table-layout: fixed会让表格忽略内容宽度，直接根据总宽度和列的数量/colspan分配基础宽度。这里表格总共有20列，soldby和date各占10列，会自动平分500px总宽度，各占250px。
• 将HTML中的width="500"移至CSS统一管理，也可保留HTML属性，但CSS优先级更高，保持数值一致即可。

此修改既保证soldby和date列宽完全一致，又不会打乱其他行的布局，无需依赖硬编码padding。

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