JSFiddle - React, Tailwind, and code Playground

by AlexandrAbakumov

HTML

<table>
  <colgroup>
    <col class="col-1">
    <col class="col-2">
  </colgroup>
    <<thead>
        <tr>
            <th colspan="2" class="col-span-1">Group Header 1</td>
            <th colspan="3" class="col-span-2">Group Header 2</td>
        </tr>
        <tr>
            <th class="col-1">Header 1</td>
            <th class="col-2">Header 2</td>
            <th class="col-3">Header 3</td>
            <th class="col-4">Header 4</td>
            <th class="col-5">Header 5</td>
        </tr>
    </<thead>
    <tbody>
        <tr>
            <td>1</td>            
            <td>2</td>            
            <td>3</td>            
            <td>4</td>            
            <td>5</td>            
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 700px;
}


table th, table td {
    border: 1px solid black;
}

/*.col-span-1 {
    width: 150px;
}*/

/*.col-1 {
    width: 300px;
}

.col-2 {
    width: 150px;
}*/

table > colgroup > col:nth-child(1) {
    width: 300px;
}

table > colgroup > col:nth-child(2) {
    width: 150px;
}