HTML table with 2 lines of cells in a row

Question

I am working with a HTML table and was wondering if a layout like shown in my screenshot are possible?

I know i can do this with <div>, but would prefer to keep the table formatting.

Answer 1

This is exactly what you wanted. Keep in mind that usually this is not how you should structure your html (Shifting a table cell into next row).

*{
    margin: 0;
    padding: 0;
}

table{
    width: 100%;
    border: 1px solid red;
    padding: 5px;
}

tr{
    border: 1px solid blue;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

td{
    height: 50px;
    flex-basis: 24%;
    border: 1px solid green;
    margin: 5px;
    box-sizing: border-box;
}

td:last-child{
    flex-basis: 100%;
}

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>