Question

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

我希望在保持第一个表居中的同时对齐两个表的左边缘。

如果我知道第一个表的宽度然后问题很简单，使用css将html宽度设置为表的宽度，并将两个表左边距设置为0.但是当宽度为流动时，表移动内容不同。我该如何解决这个难题？

Answer 1

这是解决此问题的一种相当简单而强大的方法。

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

在.wrap上，设置display: table和margin: 0 auto。这将迫使.wrap采用缩小到适合的宽度，然后边距技巧将使该块居中。

默认情况下，您的两个子表将对齐到左侧。

＆＃13;

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

＆＃13;

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

＆＃13;

你也可以在http://jsfiddle.net/audetwebdesign/qt5ffzuo/

看到jsfiddle

Answer 2

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

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

＆＃13;

body {
    text-align: center;
}

.wrapper {
    display: inline-block;
    border: 1px solid red;
    text-align: left;
}

table, tr, td {
    border: 1px solid blue;
}

＆＃13;

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

＆＃13;

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

2 个答案: