JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<table border="1">
    <tr>
        <td rowspan="7">Project</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td rowspan="3">Plan 1</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td>User 1</td>
        <td>20</td>
    </tr>
    <tr>
        <td>User 2</td>
        <td>15</td>
    </tr>
    <tr>
        <td rowspan="3">Plan 2</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td>User 1</td>
        <td>25</td>
    </tr>
    <tr>
        <td>User 3</td>
        <td>12</td>
    </tr>
    
    <tr>
        <td rowspan="7">Project</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td rowspan="3">Plan 1</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td>User 1</td>
        <td>20</td>
    </tr>
    <tr>
        <td>User 2</td>
        <td>15</td>
    </tr>
    <tr>
        <td rowspan="3">Plan 2</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td>User 1</td>
        <td>25</td>
    </tr>
    <tr>
        <td>User 3</td>
        <td>12</td>
    </tr>
</table>

CSS

table {
    table-layout: fixed;
}

td {
    width: 100px;
    height: 20px;
}