并排显示的两个表格如何实现TD高度一致？

嘿，这个表头对齐的难题我之前也碰到过！当两个并排表格的数据量不一样时，各自的表头很容易因为下方内容高度不同而错开，确实挺闹心的。我给你分享两个靠谱的解决方法，优先推荐纯CSS的方案，稳定又省心：

方法一：CSS Grid 强制对齐（推荐） #

这个方法通过把表格拆分成网格轨道，让两个表格的对应表头、数据区域共享相同的高度轨道，从根源上解决对齐问题。

示例代码 #

HTML 结构

<div class="table-wrapper">
  <!-- 第一个表格 -->
  <table class="aligned-table">
    <thead>
      <tr>
        <th>用户信息</th>
      </tr>
      <tr>
        <th>姓名</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>张三</td></tr>
      <tr><td>李四</td></tr>
      <tr><td>王五</td></tr>
    </tbody>
  </table>

  <!-- 第二个表格 -->
  <table class="aligned-table">
    <thead>
      <tr>
        <th>订单数据</th>
      </tr>
      <tr>
        <th>订单编号</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>OD001</td></tr>
    </tbody>
  </table>
</div>

CSS 样式

.table-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两个表格各占一半宽度 */
  gap: 15px; /* 表格间的间距，可按需调整 */
  margin: 20px;
}

.aligned-table {
  display: grid;
  /* 这里的行数要和你的表头行数+数据区域对应，比如2行表头+1个数据区，就设为 auto auto 1fr */
  grid-template-rows: auto auto 1fr;
  border-collapse: collapse;
  width: 100%;
}

/* 让thead和tbody的子元素直接参与网格布局，不产生额外容器 */
.aligned-table thead, .aligned-table tbody {
  display: contents;
}

/* 把每一行表头对应到网格的指定行 */
.aligned-table thead tr:nth-child(1) {
  grid-row: 1;
  background-color: #f5f5f5;
}

.aligned-table thead tr:nth-child(2) {
  grid-row: 2;
  background-color: #eeeeee;
}

/* 数据区域统一放在最后一个网格行 */
.aligned-table tbody {
  grid-row: 3;
}

.aligned-table th, .aligned-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

原理说明 #

• 外层容器用grid布局让两个表格并排；
• 每个表格内部也用grid，把表头的每一行分配到固定的网格轨道；
• display: contents让thead/tbody不再是独立容器，它们的tr直接继承表格的网格布局，这样两个表格的对应表头行会自动取最高的那个高度，实现完美对齐。

方法二：JavaScript 动态计算高度（备选） #

如果你的项目里无法修改表格的display属性，也可以用JS动态计算表头行的高度，强制设置为相同值：

// 获取两个表格的所有表头行
const table1Headers = document.querySelectorAll('.aligned-table:first-of-type thead tr');
const table2Headers = document.querySelectorAll('.aligned-table:last-of-type thead tr');

// 遍历每一对表头行，设置最大高度
table1Headers.forEach((headerRow, index) => {
  const height1 = headerRow.offsetHeight;
  const height2 = table2Headers[index].offsetHeight;
  const maxHeight = Math.max(height1, height2);
  
  headerRow.style.height = `${maxHeight}px`;
  table2Headers[index].style.height = `${maxHeight}px`;
});

这个方法适合临时场景，但要注意如果窗口大小变化或者内容更新，需要重新计算高度，不如CSS方案灵活。

如果你的表头结构更复杂（比如有合并单元格），可以补充具体的HTML结构，我再帮你调整方案！

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