如何解决HTML表格相邻合并单元格布局分布异常的问题

数据老陈

2026-10-3

问题原因

你编写的单元格合并逻辑本身没有错误，布局不符合预期是HTML表格默认自动布局模式下，复杂跨行跨列组合的宽度/高度计算偏差导致的。

修正方案

在表格的CSS样式中补充table-layout: fixed规则，强制表格按你设定的合并规则布局即可，同时可以给表格指定固定宽度保证显示效果统一。
修正后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
            border-collapse: collapse;
            /* 新增布局规则 */
            table-layout: fixed;
            width: 400px;
        }
        th, td {
            border: 1px solid black;
            padding: 1px 30px;
            text-align: center;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
    </style>

</head>
<body>
    <table>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td colspan="2">8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
            <td colspan="2">11</td>
        </tr>
        <tr>
            <td rowspan="3" colspan="2">12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>14</td>
        </tr>
        <tr>
            <td>15</td>
        </tr>
        <tr>
            <td>16</td>
            <td colspan="2" rowspan="2">17</td>
        </tr>
        <tr>
            <td rowspan="2">18</td>
        </tr>
        <tr>
            <td>19</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>