JSFiddle - React, Tailwind, and code Playground

by Douglas Crosby

HTML

<table>
    
    <colgroup class="narrow"/>
    <colgroup class="dynamic"/>
    <colgroup class="narrow"/>
    <colgroup class="dynamic"/>
    <tr>
        <th colspan="2">A</th>
        <th colspan="2">B</th>
    </tr>
    <tr>
        <th>A1</th>
        <th>A2</th>
        <th>B1</th>
        <th>B2</th>
    </tr>
    
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>b1</td>
        <td>b2</td>
    </tr>
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>b1</td>
        <td>b2</td>
    </tr>
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>b1</td>
        <td>b2</td>
    </tr>
</table>

CSS

table{
    border-collapse: collapse;
    width:100%;
}
th, td{
    border: 1px solid #999;
    padding:5px 7px 6px;
}

.narrow{
    width:40px;
}
.dynamic{
    width:auto;
}