JSFiddle - React, Tailwind, and code Playground

by rvpatel

HTML

<table border="1" cellpadding="3">
        <thead>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3"></td>
                <td colspan="2"></td>
                <td></td>
            </tr>
        </tbody>
    </table>

CSS

td {
    padding: 10px 20px;
    border: 1px solid #000;
}
td[colspan="3"] { 
    border:none;
    position:relative;
}
td[colspan="3"]:after {
     content:"";
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    display: block;
    height: 24px;
    width: 132px;
    position: absolute;
    top: 0;
    left: -3px;
    background: #FFF;
}