我有两个并行的div，每个div中有一个或多个堆叠的表.
我正在try 将页面中的表格居中，因此左侧<div>的表格应该移动到右侧，而右侧<div>的表格应该移动到左侧.我想要一个固定的50px的桌子之间的水平间隔.
使用我当前的CSS代码，我能够将右<div>中的表向左移动，但我陷入了如何将左<div>中的表向右移动的问题上.谢谢你的帮助.
Current output
Output I'm looking for
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Table Generator</title>
<style>
body {
text-align: center;
}
#inputContainer {
margin-bottom: 20px;
}
#tableContainer {
display: flex;
justify-content: space-between;
margin: 0 -25px;
padding: 40px;
box-sizing: border-box;
}
.tableWrapperLeft {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
}
.tableWrapperRight {
width: 50%;
margin: 0 25px;
border: 2px solid yellow;
}
table {
border-collapse: collapse;
margin-bottom: 50px;
width: 288px;
height: 288px;
}
td {
border: 1px dotted black;
text-align: center;
}
td:first-child {
border-left: 1px dotted black;
}
tr:first-child td {
border-top: 1px dotted black;
}
.tableWrapperRight table {
border: 2px solid green;
}
.tableWrapperLeft table {
border: 2px solid green;
}
</style>
</head>
<body>
<div id="tableContainer">
<div class="tableWrapperLeft">
<table>
<tr>
<td>V</td><td>W</td><td>E</td><td>G </td>
</tr>
<tr>
<td>G</td><td>K</td><td>L</td><td>D </td>
</tr>
<tr>
<td>W</td><td>F</td><td>U</td><td>N </td>
</tr>
<tr>
<td>G</td><td>A</td><td>Q</td><td>L </td>
</tr>
</table>
</div>
<div class="tableWrapperRight">
<table>
<tr>
<td>U</td><td>N</td><td>P</td><td>H </td>
</tr>
<tr>
<td>Q</td><td>L</td><td>R</td><td>B </td>
</tr>
<tr>
<td>J</td><td>B</td><td>I</td><td>N </td>
</tr>
<tr>
<td>D</td><td>A</td><td>H</td><td>T </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
UPDATE个
使用@FATM提供的解决方案，我在左侧的"div"中遇到了问题，如果每个"div"都有一个以上的表，则如下所示.
