Complex HTML table with rowspans and colspans is broken

user_15476741 0
Viewed 289

I am struggling displaying a table in HTML with a rather complicated structure and would like some help in trying to figure out what the problem might be. My goal is to print out the following table in HTML:

Desired layout

Actual layout when shown using 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>

You can see the result here: https://codepen.io/lexokag/pen/OJWyojq

Can you advise where do I have a mistake in my colspans/rowspans?

html-table html
1 Answers

In this table, I had to leave an empty tag <tr></tr>, to create a row that will not allow your table to break.

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>

user_135734440
Related