html - 具有 rowspans 和 colspans 的复杂 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>