HTML表格rowspan未正常显示问题求助及原因解析

问题原因 #

浏览器渲染表格时，会自动压缩无内容（或内容极少）的行高度到最小值。你初始代码里的第4个<tr>没有额外内容，被浏览器压缩后，依赖rowspan跨多行的单元格（如3、4、8、9）无法获得足够的垂直空间来覆盖预期的行数。当给该行添加height="20%"后，强制给该行分配了表格总高度的固定比例，浏览器就能正确计算rowspan单元格需要跨越的行高总和，从而正常渲染。

优化解决方法（尽量少用CSS） #

方法1：给关键行设置固定像素高度 #

用固定像素值替代百分比，渲染效果更稳定，避免不同浏览器的百分比计算差异：

<table border="1" cellspacing="0" height="200px" align="center" width="200px" style="text-align:center">    
    <tr>
        <td colspan="5">1</td>
    </tr>
    <tr>
        <td colspan="3">2</td>
        <td rowspan="3" colspan="2">3</td>
    </tr>
    <tr>
        <td rowspan="3">4</td>
        <td colspan="2">5</td>
    </tr>
    <!-- 设置固定像素高度，确保行不会被压缩 -->
    <tr height="40">
        <td rowspan="2">8</td>
        <td rowspan="2">9</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
    </tr>
</table>

方法2：给空行添加内容占位 #

利用HTML原生的非换行空格 给空行的单元格占位，让浏览器自动维持行的基本高度，无需额外CSS：

<table border="1" cellspacing="0" height="200px" align="center" width="200px" style="text-align:center">    
    <tr>
        <td colspan="5">1</td>
    </tr>
    <tr>
        <td colspan="3">2</td>
        <td rowspan="3" colspan="2">3</td>
    </tr>
    <tr>
        <td rowspan="3">4</td>
        <td colspan="2">5</td>
    </tr>
    <tr>
        <td rowspan="2">8</td>
        <td rowspan="2">9</td>
        <!-- 添加空格占位，避免行被压缩 -->
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
    </tr>
</table>

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