HTML table leaving open gaps when hiding cells - html

Question

The example below contains two tables, and each table includes two sections. Both tables and sections are structurally the same.
When the cells in the first table that are marked with class ".to-hide" are hidden by changing this class to ".hide" (shown in the second table), the resulting layout of the second table appears inconsistent; the cell "4" in the first section closes all gaps left by the hidden cells, but cell "4" in the second section leaves open gaps.
On Chrome 68.0.3440.106, the code snippet below shows how one cell "4" fill open gaps, but the other cell "4" does not. On Firefox 60.0.2, both cells "4" leave open gaps. The image below is taken on Chrome 68.
How can I ensure that visible cells in the table cover any gaps left by hidden cells, consistently, across browsers?
/* Styles to mark and hide marked cells. */
.to-hide { background-color: lightgray; }
.hide { display: none; }
/* Styles to make the tables in the code snippet look pretty. */
.left { display: inline-block; }
.right { display: inline-block; margin-left: 20px; }
table { background-color: yellow; }
td { padding: 0 1em; background-color: white; border: solid 1px gray; }
<div class="left">
Original table:
<table>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="to-hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="to-hide">a</td>
<td class="to-hide">b</td>
</tr>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="to-hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="to-hide">a</td>
<td class="to-hide">b</td>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
</tbody>
</table>
</div>
<div class="right">
Shaded cells hidden (notice cells "4"):
<table>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="hide">a</td>
<td class="hide">b</td>
</tr>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td rowspan="2">.<br/>2<br/>.</td>
<td class="hide">3</td>
<td>4</td>
</tr>
<tr>
<td class="hide">a</td>
<td class="hide">b</td>
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td colspan="4">i</td>
</tr>
</tbody>
</table>
</div>

Answer 1

By hiding cells "a" and "b" rowspan="3" of cell "1" wants to occupy the same area like cell "i". Cell "i" can not span 3 rows since there are only 3 rows left and on the last row spans cell "i" all columns.
Forcing hidden cells to a size of 0 does not help.
.hide {
visibility: hidden;
width: 0;
height: 0;
padding: 0;
}
Taking hidden cells out of flow by position: absolute does not help either.
That the first section of the table still looks good (no gaps) must be some kind of error correction by browser.
Only by removing hidden cells from the table and changing the values for rowspan and colspan I was able to achieve the intended distribution of cells.
<tr>
<td rowspan="2">1</td>
<td>.<br/>2<br/>.</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td colspan="3">i</td>
</tr>