JSFiddle - React, Tailwind, and code Playground

by BlaXpirit

HTML

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td colspan="2">2+3</td>
        <!-- -->
    </tr>
    <tr>
        <td colspan="2">1+2</td>
        <!-- -->
        <td>3</td>
    </tr>
    <tr>
        <td colspan="3">1+2+3</td>
        <!-- -->
        <!-- -->
    </tr>
</table>

<br/>

<table>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td rowspan="2">2+3</td>
        <td rowspan="3">2+3+4</td>
    </tr>
    <tr>
        <td>3</td>
        <!-- -->
        <!-- -->
    </tr>
    <tr>
        <td>4</td>
        <td>4</td>
        <!-- -->
    </tr>
</table>

<br/>

<table>
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td colspan="2" rowspan="2">22+23+32+33</td>
        <!-- -->
    </tr>
    <tr>
        <td>31</td>
        <!-- -->
        <!-- -->
    </tr>
</table>

CSS

body {
    padding: 5px;
}
table {
    width: 100%;
    table-layout: fixed;
}
td {
    border: 1px solid black;
}