JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<table class="table">
    <tr><th colspan="3">table</th></tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td colspan="2" height="100">1.1</td>
                </tr>
                <tr>
                    <td colspan="2">1.2</td>
                </tr>
                <tr>
                    <td>1.3</td>
                    <td>1.4</td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>2.1</td>
                </tr>
                <tr>
                    <td>2.2</td>
                </tr>
                <tr>
                    <td>2.3</td>
                </tr>
                <tr>
                    <td>2.4</td>
                </tr>
            </table>
        </td>
        <td>
             <table>
                <tr>
                    <td>3.1</td>
                </tr>
                <tr>
                    <td>3.2</td>
                </tr>
                <tr>
                    <td>3.3</td>
                </tr>
            </table>       
        </td>
    </tr>
</table>

CSS

.table, table {
    width: 100%;
    border-collapse: collapse;
}
.table table td, th {
    text-align: center;
    border: 1px solid #000;
}