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

【问题标题】：Centering 2 tables while still responding to changes in page width using HTML and CSS居中 2 个表格，同时仍使用 HTML 和 CSS 响应页面宽度的变化
【发布时间】：2014-07-12 00:05:39
【问题描述】：

两个要求：

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

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

PS。这仅有助于满足要求 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;
    }
}

【问题讨论】：

标签： html css centering

【解决方案1】：

我的建议是使用响应式 CSS。您没有提到表格的宽度是否固定。在一般的 CSS 样式中，您将使用 display:inline CSS 属性设置这些表格中的每一个。这让他们并肩而行。

然后，无论您需要将表格堆叠成何种分辨率，都可以在媒体查询中进行设置。格式如下所示：

@media (max-width: 979px) {
    .mytable { display: block }
}

要获取有关内联与块的更多信息，请访问此处：display:inline vs display:block

对于响应式设计，试试这个：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【讨论】：

感谢您的所有帮助.. 请参阅上面的解决方案！
如果您喜欢我的回答，请接受它作为解决方案！谢谢

【解决方案2】：

试试这个

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

【讨论】：

谢谢！我非常感谢您的帮助，因为这解决了第一点。