JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<head>
</head>
<body>

<table>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td class="w50">50px</td>
</tr>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td>50px</td>
</tr>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td>50px</td>
</tr>
</table>

<table>
<colgroup>
<col/>
<col/>
<col/>
<col/>
<col width="50px"/>
</colgroup>
<tr>
<td colspan="5">test</td>
</tr>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td class="w50">50px</td>
</tr>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td>50px</td>
</tr>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td>50px</td>
</tr>
</table>

<table>
<tr class="hidden">
<td></td><td></td><td></td><td></td><td style="width:50px"></td>
</tr>
<tr>
<td colspan="5">test</td>
</tr>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td class="w50">50px</td>
</tr>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td>50px</td>
</tr>
<tr>
<td>normal</td><td>normal</td><td>normal</td><td>normal</td><td>50px</td>
</tr>
</table>
</body>
</html>

CSS

table{
  table-layout: fixed;
  width:100%;
  margin-bottom:50px;
}
td{
  border:1px black solid;
}
td.w50{
  width:50px;
}
tr.hidden, tr.hidden td{
  height:0;
  margin:0;
  padding:0;
  border:0;
}