具有 rowspan 和 colspan 的复杂 HTML 表已损坏

Question

我正在努力以 HTML 格式显示一个结构相当复杂的表格，并希望在试图找出问题所在时得到一些帮助。我的目标是用 HTML 打印出下表：

想要的布局

使用 HTML 显示时的实际布局：

table td {
        border: 1px solid black;
    }
    
    table {
        width: 100%;
    }

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

你可以在这里看到结果：https://codepen.io/lexokag/pen/OJWyojq

你能告诉我在我的 colspans/rowspans 中哪里有错误吗？

Answer 1

在这个表中，我必须留下一个空标签<tr></tr>，以创建一个不会让你的表中断的行。

table {
    width: 100%;
}

table tr {   
    height: 30px;
}

table td {
    border: 1px solid black;
    text-align: center;
}

<table>
    <tbody>
        <tr>
            <td rowspan="3">test text</td>
            <td colspan="2" rowspan="3">test text</td>
            <td>test text</td>
            <td>test text</td>
        </tr>
        <tr>
            <td rowspan="2" colspan="2">test text</td>     
        </tr>
        <tr></tr>
        <tr>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
            <td rowspan="2">test text</td>
            <td>test text</td>
        </tr>
        <tr>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
        </tr>
        <tr>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
            <td>test text</td>
        </tr>
    </tbody>
</table>