JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tbody>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="2">th</th>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td colspan="3">td</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="2">th</th>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td colspan="2">td</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">th</th>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td colspan="2">td</td>
</tr>
<tr>
<td colspan="3">td</td>
</tr>
</tbody>
</table>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
background: #f00;
background: -webkit-linear-gradient(#f00, #000);
background: -moz-linear-gradient(#f00, #000);
background: -o-linear-gradient(#f00, #000);
background: linear-gradient(#f00, #000);
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: .5em;
text-align: center;
background: #ccc;
background-clip: padding-box;
}
th ~ td, th {
border-top: 5px solid transparent;
}
th {
background-color: transparent;
background-image:
-moz-radial-gradient(circle, rgba(204,204,204,1) 5px, rgba(204,204,204,0) 6px),
-moz-radial-gradient(circle, rgba(204,204,204,1) 5px, rgba(204,204,204,0) 6px),
-moz-linear-gradient(top, transparent 6px, #ccc 6px),
-moz-linear-gradient(left, transparent 6px, #ccc 6px);
background-image:
-webkit-radial-gradient(circle, rgba(204,204,204,1) 5px, rgba(204,204,204,0) 6px),
-webkit-radial-gradient(circle, rgba(204,204,204,1) 5px, rgba(204,204,204,0) 6px),
-webkit-linear-gradient(top, transparent 6px, #ccc 6px),
-webkit-linear-gradient(left, transparent 6px, #ccc 6px);
background-size:
12px 12px,
12px 12px,
100% -moz-calc(100% - 6px),
100% 100%;
background-size:
12px 12px,
12px 12px,
100% -webkit-calc(100% - 6px),
100% 100%;
background-position:
0 0,
0 bottom;
background-repeat:
no-repeat;
}