html - 左对齐两个表格，同时保持第一个(具有流动宽度)居中

Question

该页面由两个表(高尔夫比分)组成。第一个总是比第二个宽，包括两列名称，因此它的总宽度会因联赛而异。第二个表仅包含数字，其宽度将保持不变。

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

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

Answer 1

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

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

在 .wrap 上，设置 display: table 和 margin: 0 auto。这将强制 .wrap 缩小以适合宽度，然后边距技巧将使 block 居中。

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

.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/