I am struggling to design a 2x2 grid of collapsible tables in HTML. I have been experimenting with different solutions, but I haven't found one that works seamlessly. When I collapse the top left table, it messes up the alignment of the bottom row tables.
<!DOCTYPE html>
<html>
<head>
<title>2x2 Table Grid</title>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
width=50%
}
</style>
<script language="JavaScript" type="text/javascript">
function setDivStyle(table, style) {
var tbl = document.getElementById(table);
tbl.style.display = style;
console.log(table + " display style set to " + style)
}
</script>
</head>
<body>
<div id="r1">
<h2>Row 1</h2>
<div id="r1-controls">
<a id="r1c1-hide" href="javascript:setDivStyle('r1c1', 'none')">Hide R1C1</a>
<a id="r1c2-show" href="javascript:setDivStyle('r1c1', 'inline')">Expand R1C1</a>
<a id="r1c2-hide" href="javascript:setDivStyle('r1c2', 'none')">Hide R1C2</a>
<a id="r1c2-show" href="javascript:setDivStyle('r1c2', 'inline')">Expand R1C2</a>
<br>
</div>
<table id="r1c1" style="display: inline; float: left">
<tr>
<th>R1C1a</th>
<th>R1C1b</th>
<th>R1C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<table id="r1c2" style="display: block; float: none">
<tr>
<th>R1C2a</th>
<th>R1C2b</th>
<th>R1C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
<div id="r2">
<h2>Row 2</h2>
<div id="r2-controls">
<a id="r2c1-hide" href="javascript:setDivStyle('r2c1', 'none')">Hide R2C1</a>
<a id="r2c1-show" href="javascript:setDivStyle('r2c1', 'inline')">Expand R2C1</a>
<a id="r2c2-hide" href="javascript:setDivStyle('r2c2', 'none')">Hide R2C2</a>
<a id="r2c2-show" href="javascript:setDivStyle('r2c2', 'inline')">Expand R2C2</a>
<br>
</div>
<table id="r2c1" style="display: inline; float: left">
<tr>
<th>R2C1a</th>
<th>R2C1b</th>
<th>R2C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<table id="r2c2" style="display: block; float: none">
<tr>
<th>R2C2a</th>
<th>R2C2b</th>
<th>R2C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
</body>
</html>