HTML表格使用rowspan时单元格高度不均问题求助

这是浏览器默认表格布局的特性，并非你遗漏了设置。浏览器的自动表格布局算法会优先根据单元格内容计算高度，当存在跨多行的单元格（比如你表格最后一列内容较多），它会占据对应合并行数的总高度，但同行的普通单元格不会自动均分这个高度，进而导致视觉上的高度不一致。

要实现单元格高度均匀分布，可以通过以下方式调整：

方案1：固定表格布局+统一行高 #

给表格添加固定布局属性，并为<tbody>内的所有行设置统一高度，同时让单元格内容垂直居中，提升视觉协调性：

table, th, td {
  border: 1px solid black;
}
table {
  table-layout: fixed;
  width: 100%; /* 固定布局需指定表格宽度 */
}
tbody tr {
  height: 50px; /* 根据需求调整统一行高 */
}
td {
  vertical-align: middle; /* 让单元格内容垂直居中 */
}

方案2：CSS Grid重构（可选） #

如果表格结构复杂，也可以用CSS Grid模拟表格布局，更灵活地控制每个单元格的高度与位置：

<style>
.grid-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid black;
}
.grid-cell {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
/* 控制跨行列的单元格范围 */
.row-span-3 { grid-row: span 3; }
.row-span-2 { grid-row: span 2; }
.row-span-4 { grid-row: span 4; }
</style>
<div class="grid-table">
  <div class="grid-cell">Heading 1</div>
  <div class="grid-cell">Heading 2</div>
  <div class="grid-cell">Heading 3</div>
  <div class="grid-cell">Heading 4</div>
  <div class="grid-cell">Heading 5</div>
  
  <div class="grid-cell row-span-3">Row 1</div>
  <div class="grid-cell">1</div>
  <div class="grid-cell row-span-3">Example</div>
  <div class="grid-cell row-span-3">Example</div>
  <div class="grid-cell row-span-3">A<br>B<br>C<br>D<br>E<br>F<br>G<br>H</div>
  
  <div class="grid-cell">1</div>
  <div class="grid-cell">3</div>
  
  <div class="grid-cell row-span-2">Row 2</div>
  <div class="grid-cell">4</div>
  <div class="grid-cell row-span-2">Example</div>
  <div class="grid-cell row-span-4">Example</div>
  <div class="grid-cell row-span-4">A<br>B<br>C<br>D<br>E<br>F<br>G<br>H</div>
  
  <div class="grid-cell">5</div>
  
  <div class="grid-cell row-span-3">Row 3</div>
  <div class="grid-cell">6</div>
  <div class="grid-cell row-span-2">Example</div>
  
  <div class="grid-cell">7</div>
</div>

方案1更贴合原表格结构，修改成本低；方案2适合需要更精细布局控制的场景。

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