html - 居中 2 个表格，同时仍然使用 HTML 和 CSS 响应页面宽度的变化

Question

两个要求:

1. 页面中间并排居中的两个表格。
2. 当页面调整为小于它们的组合宽度时，右表移动到左表下方。

我曾尝试将两个表放在一个居中的 div 容器中，然后再放在另一个表中，但是当页面调整大小时它们不会改变位置。预先感谢您的帮助。

附言。这仅有助于要求 1 和 1:Two HTML tables side by side, centered on the page

<div id="tables_container">
<table align="center"><tr><td>
    <table class="tables">
        <tr class="r1">
            <td>text</td>
            <td>text</td>
        </tr>
        <tr class="r2">
            <td>text</td>
            <td>text</td>
        </tr>
    </table>
</td><td>
    <table class="tables">
        <tr class="r2">
            <td>text</td>
            <td>text</td>
        </tr>
        <tr class="r1">
            <td>text</td>
            <td>text</td>
        </tr>
    </table>
</td></tr></table>

回答我自己的问题(它不会让我在下面回答)......我认为有必要做2种不同的格式化方法来实现这个目标。感谢@erikr98，我能够这样做:

HTML:

<div id="tables_container">
    <table class="tables">
        <tr class="r1">
            <td>text</td>
        </tr>
        <tr class="r2">
            <td>text</td>
        </tr>
    </table>
    <table class="tables">
        <tr class="r2">
            <td>text</td>
        </tr>
        <tr class="r1">
            <td>text</td>
        </tr>
    </table>
</div>

CSS:

@media (max-width: 1099px) { /*small*/
    #tables_container{
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    table{
            margin-right: auto;
            margin-left: auto;
    }
}

@media (min-width: 1100px) { /*big*/
    #tables_container{
        margin-left: auto;
        margin-right: auto;
        width: 1070px;
    }

    table{
            display: inline-block;
            margin-right: auto;
            margin-left: auto;
    }
}

Answer 1

试试这个

<style type="text/css">
table {
    width: X;
    margin: 0 auto;
    display: block;
}</style>