Complex HTML table with rowspans and colspans 已损坏

Question

我正在努力在 HTML 中显示结构相当复杂的 table，希望得到一些帮助来找出问题所在。我的目标是在 HTML 中打印出以下 table:

所需布局

使用 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

在这个 table 中，我不得不留下一个空标签 <tr></tr>，以创建一个不会让您的 table 中断的行。

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>

Complex HTML table with rowspans and colspans 已损坏

Complex HTML table with rowspans and colspans is broken

html

html-table