左对齐两个表格，同时保持第一个（具有流体宽度）居中答案

【问题标题】：Left align two tables while keeping the first (with fluid width) centered左对齐两个表格，同时保持第一个（具有流体宽度）居中
【发布时间】：2018-10-31 16:47:57
【问题描述】：

该页面由两个表格（高尔夫分数）组成。第一个总是比第二个宽，包括两列名称，因此它的总宽度会因联赛而异。第二个表只包含数字，它的宽度是不变的。

我想对齐两个表格的左边缘，同时保持第一个表格居中。

如果我知道第一个表格的宽度，那么问题就很简单了，使用 css 将 html 宽度设置为表格的宽度，并将两个表格的左边距设置为 0。但是随着宽度的流动，表格会移动有不同的内容。我该如何解决这个困境？

【问题讨论】：

请添加您已经拥有的代码并说明您迄今为止尝试解决的问题

标签： html css html-table

【解决方案1】：

这是解决此问题的一种相当简单且可靠的方法。

首先，创建一个包装元素以包含两个表，在我的示例中为 .wrap。

打开.wrap，设置display: table 和margin: 0 auto。这将强制 .wrap 采用缩小以适应宽度，然后边距技巧将使块居中。

您的两个子表将默认向左对齐。

.wrap {
    display: table;
    border: 1px dashed blue;
    margin: 0 auto;
}
table {
    border: 1px dotted blue;
    margin: 20px;
}
table td {
    border: 1px solid gray;
}

<div class="wrap">
    <table>
        <tr>
            <td>First Wide Column With Long Names</td>
            <td>Second Wide Column with Very Long Names</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>First Short Column</td>
            <td>Second Short Column</td>
        </tr>
    </table>
</div>

您还可以在以下位置查看 jsfiddle：http://jsfiddle.net/audetwebdesign/qt5ffzuo/

【讨论】：

效果很好！！表格现在可以在所有浏览器上正确显示。要学的东西太多，时间太少了哈哈。
记得接受和/或投票给答案，以便人们知道问题已得到解答。欢迎来到 SO！

【解决方案2】：

一种方法是在具有display: inline-block 的表周围添加一个包装器。这将使包装器缩小以适合最大的桌子。它还允许您通过将父级（例如body）设置为text-align: center，使其水平居中。

为确保表格中的文本不居中，您必须将 text-align: left 设置为包装内容。

body {
    text-align: center;
}

.wrapper {
    display: inline-block;
    border: 1px solid red;
    text-align: left;
}

table, tr, td {
    border: 1px solid blue;
}

<div class="wrapper">
    <table>
        <tr><th>Name</th><th>Score</th></tr>
        <tr>
            <td>Johnny</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Jimmy</td>
            <td>12.412.002</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>6</td>
            <td>3</td>
        </tr>
        <tr>
            <td>5</td>
            <td>4</td>
        </tr>    
    </table>
</div>

【讨论】：