JSFiddle - React, Tailwind, and code Playground

by Антон Супрович

HTML

<table>
<tr><td rowspan="2">Vezha<br />#ddd</td><td rowspan="4"></td><td colspan="2">1 &nbsp; #ddd</td>
		<td rowspan="2"></td><td colspan="2">2</td><td rowspan="4"></td><td colspan="2">3</td><!-- +2 column -->
<td rowspan="2"></td><td colspan="2">9 &nbsp; #eee</td><td rowspan="4"></td></tr>
<tr><td>1a</td><td>1b</td>
		<td>2a</td><td>2b</td><td>3a</td><td>3b</td><!-- +2 column -->
<td>9a</td><td>9b</td></tr>
<tr><td></td><td colspan="5"></td>
		<td colspan="5"></td><!-- +2 column -->
</tr>
<tr><td>A &nbsp; #999</td><td>A1</td><td>A1</td>
		<td rowspan="3"></td><td>A2</td><td>A2</td><td>A3</td><td>A3</td><!-- +2 column -->
<td rowspan="3"></td><td>A9</td><td>#aaa</td></tr>

    		<!-- +2 row -->
<tr><td colspan="4"></td>
		<td colspan="5"></td><!-- +2 column -->
<td colspan="3"></td></tr>
<tr><td>B</td><td rowspan="3"></td><td>B1</td><td>B1</td>
		<td>B2</td><td>B2</td><td rowspan="3"></td><td>B3</td><td>B3</td><!-- +2 column -->
<td>B9</td><td>B9</td><td rowspan="3"></td></tr>
<tr><td></td><td colspan="5"></td>
		<td colspan="5"></td><!-- +2 column -->
</tr>
<tr><td>C</td><td>C1</td><td>C1</td>
		<td rowspan="3"></td><td>C2</td><td>C2</td><td>C3</td><td>C3</td><!-- +2 column -->
<td rowspan="3"></td><td>C9</td><td>C9</td></tr>
    		<!-- +2 row end-->
    
<tr><td colspan="4"></td>
		<td colspan="5"></td><!-- +2 column -->
<td colspan="3"></td></tr>
<tr><td>Z &nbsp; #ccc</td><td rowspan="2"></td><td>Z1</td><td>Z1</td>
		<td>Z2</td><td>Z2</td><td rowspan="2"></td><td>Z3</td><td>Z3</td><!-- +2 column -->
<td>Z9</td><td>#ddd</td><td rowspan="2"></td></tr>
<tr><td></td><td colspan="5"></td>
		<td colspan="5"></td><!-- +2 column -->
</tr></table>

CSS

table {border-collapse:collapse;}
td {border:1px solid #bbb;}
tr:nth-child(2n+3) td{height:3px; background:#dfe;} /* горизонтальные розделители */
[rowspan='2'], [rowspan='3'], [rowspan='4']{width:2px; background:#ddf;} /* вертикальные розделители */
tr:first-child td,
tr:nth-child(2) td {height:20px;text-align:center;}
tr:nth-child(2n+4) td {height:20px;}
tr:nth-child(2) td {width:60px;}
tr+tr+tr td:first-child {width:80px;}
tr:nth-child(4n+4) td:first-child,                       /* А, С..  первая ячейка */
tr:nth-child(4n+4) td:nth-child(5n+2),                   /* А, С..  1a, 3a.. */
tr:nth-child(4n+4) td:nth-child(5n+3) {background:#999;} /* А, С..  1b, 3b.. */
tr:nth-child(4n+4) td:nth-child(5n+5),                   /* А, С..  2a, 4a.. */
tr:nth-child(4n+4) td:nth-child(5n+6) {background:#aaa;} /* А, С..  2b, 4b.. */
tr:nth-child(4n+6) td:first-child,                       /* B, D..  первая ячейка */
tr:nth-child(4n+6) td:nth-child(5n+3),                   /* B, D..  1a, 3a.. */
tr:nth-child(4n+6) td:nth-child(5n+4) {background:#ccc;} /* B, D..  1b, 3b.. */
tr:nth-child(4n+6) td:nth-child(5n+5),                   /* B, D..  2a, 4a.. */
tr:nth-child(4n+6) td:nth-child(5n+6) {background:#ddd;} /* B, D..  2b, 4b.. */
tr:first-child td:first-child,                           /* ячейка 0:0 */
tr:first-child td:nth-child(4n+3),                       /* 1, 3.. */
tr:nth-child(2) td:nth-child(4n+1),                      /* 1a, 3a.. */
tr:nth-child(2) td:nth-child(4n+2) {background:#ddd;}    /* 1b, 3b.. */
tr:first-child td:nth-child(4n+5),                       /* 2, 4.. */
tr:nth-child(2) td:nth-child(4n+3),                      /* 2a, 4a.. */
tr:nth-child(2) td:nth-child(4n+4) {background:#eee;}    /* 2b, 4b.. */