HTML表格rowspan行合并后主流浏览器非合并行垂直拉伸解决方法问询

可行编码方案 #

方案1：移除表格固定高度 #

本次主流浏览器统一的跨行表格布局规则，仅在表格设置了显式固定总高度时生效。如果你的业务场景不需要强制表格保持固定高度，直接删除<table>标签的height配置，或将其设置为height: auto，即可让所有行高由内容本身撑开，非合并行不会被强制拉伸适配上方合并单元格的高度。

方案2：内容套固定高度容器 #

如果必须保留表格的固定高度设置，可将所有非合并单元格的内容包裹在固定高度的块级容器中，就算外层单元格被拉伸，内部内容的排版间距也不会变化，示例如下：

<html>
<head>
  <title>修复后表格效果</title>
  <style>
    /* 固定内容高度，避免被外层单元格拉伸影响 */
    .cell-content {
      height: 20px;
      line-height: 20px;
    }
  </style>
</head>
<body>
<table style="width: 500px; height: 200px; border-collapse: collapse;">
    <tr style="background: #66FF00;">
        <td><div class="cell-content">&nbsp;&nbsp;Column 1</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;Column 2</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;Column 3</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;Column 4</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;Column 5</div></td>
    </tr>
    <tr style="background: #66FF00;">
        <!-- 修正原代码语法错误：td必须包裹在tr标签内 -->
        <td rowspan="7" style="background: #66FF00;"><div class="cell-content">&nbsp;&nbsp;Spanned 7 Rows</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 1</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 1</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 1</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 1</div></td>
    </tr>
    <tr style="background: #66FF00; padding-left:10px">
        <td><div class="cell-content">&nbsp;&nbsp;row 2</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 2</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 2</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 2</div></td>
    </tr>
    <tr style="background: #66FF00; padding-left:10px">
        <td><div class="cell-content">&nbsp;&nbsp;row 3</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 3</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 3</div></td>
        <td><div class="cell-content">&nbsp;&nbsp;row 3</div></td>
    </tr>
    <!-- 剩余4行占位，匹配rowspan=7的配置 -->
    <tr style="background: #66FF00;"><td></td><td></td><td></td><td></td></tr>
    <tr style="background: #66FF00;"><td></td><td></td><td></td><td></td></tr>
    <tr style="background: #66FF00;"><td></td><td></td><td></td><td></td></tr>
    <tr style="background: #66FF00;"><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>

方案3：分列嵌套表格 #

如果希望完全规避跨行合并的拉伸逻辑，可以把表格拆分为左右两个独立的表格并排布局，左侧放置跨行展示的内容，右侧放置普通行内容，两者行高独立计算，不会互相干扰。

注：你提供的原示例代码存在HTML语法错误，带rowspan属性的td标签直接放在了tr标签外，不符合HTML规范，也会导致布局出现异常，建议先修正结构问题。

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