JSFiddle - React, Tailwind, and code Playground

by jinglesthula

HTML

Ok with multiple tbody elements:
<table class="mainContent">
	<thead><tr><th>hi</th><th>there</th></tr></thead>
	<tbody><tr><td>hi</td><td>there</td></tr></tbody>	
	<tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
	<tbody><tr><td>hi</td><td>there</td></tr></tbody>	
</table>
<br />
<br />
If any of the tbody elements contains a single display: none row then things go awry:
<table class="mainContent">
	<thead><tr><th>hi</th><th>there</th></tr></thead>
	<tbody><tr><td>hi</td><td>there</td></tr></tbody>	
	<tbody><tr class="hide"><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
    <tbody><tr><td>hi</td><td>there</td></tr></tbody>
	<tbody><tr><td>hi</td><td>there</td></tr></tbody>	
</table>

CSS

table {
    border-collapse: collapse;
}
table tr td {
    border: solid 1px #ccc;
    padding: 4px;
}
.hide {
    display: none;
}