如何仅用HTML/CSS实现不同列数HTML表格的同表头列对齐？

完全可以仅通过HTML和CSS实现需求，核心思路是给两个表格中对应表头的列（包括<th>和<td>）添加统一的自定义类名，再通过CSS规则同步列宽逻辑，同时保证响应式特性。

实现步骤 #

1. 动态生成表格时添加统一类名

确保Ajax生成的两个表格中，对应字段的列（表头和单元格）使用完全相同的类名，比如ID列都加col-id，姓名列都加col-name：

<!-- 表格#NOTE -->
<div class="table-container">
  <table id="NOTE">
    <thead>
      <tr>
        <th class="col-id">ID</th>
        <th class="col-name">姓名</th>
        <th class="col-note">备注</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-id">1</td>
        <td class="col-name">张三</td>
        <td class="col-note">这是一段较长的备注内容，用于测试列宽自适应</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 表格#STATI -->
<div class="table-container">
  <table id="STATI">
    <thead>
      <tr>
        <th class="col-id">ID</th>
        <th class="col-name">姓名</th>
        <th class="col-status">状态</th>
        <th class="col-date">日期</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-id">1</td>
        <td class="col-name">张三</td>
        <td class="col-status">正常</td>
        <td class="col-date">2024-05-20</td>
      </tr>
    </tbody>
  </table>
</div>

2. CSS规则实现对齐与响应式

通过CSS控制表格布局和列宽，同时保证小屏幕适配：

/* 容器：处理小屏幕横向滚动，保证响应式 */
.table-container {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

/* 表格基础样式 */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* 自动根据内容调整列宽，避免固定尺寸 */
}

th, td {
  border: 1px solid #e0e0e0;
  padding: 0.6rem;
  text-align: left;
}

/* 核心：同步对应列的宽度规则 */
/* ID列：最小宽度适配内容，禁止换行保证宽度统一 */
.col-id {
  width: min-content;
  white-space: nowrap;
}

/* 姓名列：自适应内容最大宽度，同时设置最小宽度避免过窄 */
.col-name {
  width: max-content;
  min-width: 120px;
}

/* 备注列：占满剩余可用空间 */
.col-note {
  width: 100%;
}

/* 状态/日期列：最小宽度适配内容，禁止换行 */
.col-status, .col-date {
  width: min-content;
  white-space: nowrap;
}

原理说明 #

• 统一类名让CSS可以精准控制两个表格中对应列的宽度逻辑
• table-layout: auto让浏览器自动计算列宽，会取两个表格中同列内容的最大宽度作为最终宽度，实现对齐
• min-content/max-content确保列宽适配内容需求，white-space: nowrap避免内容换行导致宽度不一致
• 容器的overflow-x: auto保证小屏幕下表格可横向滚动，满足响应式要求

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