JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<colgroup>
<col></col> <col></col> <col></col>
</colgroup>
<colgroup>
<col></col> <col></col> <col></col>
</colgroup>
<tbody>
<!-- première ligne verte -->
<tr>
<th colspan=6 scope=colgroup>…</th>
</tr>
<!-- plusieurs lignes à 6 colonnes -->
<tr>
<td>…</td> <td>…</td> <td>…</td>
<td>…</td> <td>…</td> <td>…</td>
</tr>
<tr>
<td>…</td> <td>…</td> <td>…</td>
<td>…</td> <td>…</td> <td>…</td>
</tr>
<tr>
<td>…</td> <td>…</td> <td>…</td>
<td>…</td> <td>…</td> <td>…</td>
</tr>
<!-- seconde ligne verte -->
<tr>
<th colspan=6 scope=colgroup>…</th>
</tr>
<!-- ligne transparente -->
<tr>
<td colspan=6>…</td>
</tr>
</tbody>
<tbody>
<!-- première ligne verte -->
<tr>
<th colspan=6 scope=colgroup>…</th>
</tr>
<!-- plusieurs lignes à 6 colonnes -->
<tr>
<td>…</td> <td>…</td> <td>…</td>
<td>…</td> <td>…</td> <td>…</td>
</tr>
<tr>
<td>…</td> <td>…</td> <td>…</td>
<td>…</td> <td>…</td> <td>…</td>
</tr>
<!-- seconde ligne verte -->
<tr>
<th colspan=6 scope=col>…</th>
</tr>
<!-- ligne transparente -->
<tr>
<td colspan=6>…</td>
</tr>
</tbody>
</table>
CSS
body { margin: 1em;
color: #F8F8F8; background: #080808; }
table { width: 100%;
border: solid thin #444;
border-spacing: 1px; }
col:nth-child(1) { width: 3%; }
col:nth-child(2) { width: 7%; }
col:nth-child(3) { width: 40%; }
td:nth-child(3n + 1) { background: blue; }
td:nth-child(3n + 2), td:nth-child(3n) { background: yellow;
color: black; }
th { background: green; }
tr:last-child td { background: transparent; }