HTML,CSS — 如何并排水平居中两个表格

Question

我阅读了两个关于如何并排制作 2 个表格的主题，但我不知道如何将它们移动到中心

    <div>
        <table style="float: left;margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table style="float: left">
        <table>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>

抱歉我英语不好

Answer 1

您可以在容器 div 上使用 flexbox，应用 justify-content: center; 将它们居中，移除 float 并在其中一个表格上使用边距在它们之间拉开距离。

.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

table {
  border: 1px solid #555;
}

<div class="wrap">
        <table style="margin-right:10%;">
            <tr>
                <td>abc</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
            <tr>
                <td>xyz</td>
            </tr>
        </table>
    </div>