列是文本对齐的中心体：left？<table> </table>

Question

我有一个包含3个标题列的HTML5表。他们各自colspan=2，总共6列宽。在每个标题下面是2个与该标题对应的正文列。我有单独的列对齐左边，但现在我希望整个身体中心对齐，以便它与标题对齐。我尝试了margin: 0 auto诀窍，确保我定义了width并且它无法正常工作。

现在看来是这样的：

这是我的HTML：

<div id="areas">
    <table>
        <thead>
            <tr>
                <td colspan="2">Delaware County</td>
                <td colspan="2">Main Line</td>
                <td colspan="2">Chester County</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="city">Broomall</td>
                <td class="zip">19008</td>
                <td class="city">Ardmore</td>
                <td class="zip">19003</td>
                <td class="city">Paoli</td>
                <td class="zip">19301</td>
            </tr>
            <tr>
                <td class="city">Chester</td>
                <td class="zip">19013</td>
                <td class="city">Bala Cynwyd</td>
                <td class="zip">19004</td>
                <td class="city">Avondale</td>
                <td class="zip">19311</td>
            </tr>
            <tr>
                <td class="city">Aston</td>
                <td class="zip">19014</td>
                <td class="city">Bryn Mawr</td>
                <td class="zip">19010</td>
                <td class="city">Berwyn</td>
                <td class="zip">19312</td>
            </tr>
         </tbody>
      </table>
</div>

我的CSS：

#areas {
    position: relative;
    margin: 30px auto 60px auto;
    width: 950px;
    padding: 20px;
    background-color: #4B004B;
    -webkit-box-shadow: 11px 11px 15px rgba(50, 50, 50, 0.85);
    -moz-box-shadow:    11px 11px 15px rgba(50, 50, 50, 0.85);
    box-shadow:         11px 11px 15px rgba(50, 50, 50, 0.85);
    border: 3px outset gold;
}

#areas thead td {
    font-family: 'electricalregular';
    -webkit-text-stroke: 1px orange;
    letter-spacing: 2px;
    font-size: 10pt;
    font-weight: 100;
    text-align: center;
    width: 316px;
    color: gold;
    padding: 0 0 15px 0;
}

#areas tbody {
    width: 950px;
    margin: 0 auto;
}

#areas tbody td {
    font-family: 'CommunistSans';
    color: gold;
    font-weight: 100;
    padding: 0 0 5px 0px;
    width: 158px;
}

#areas .zip {
    text-align: left;
}

#areas .city {
    text-align: left;
}

Answer 1

你可以尝试

#areas .zip, #areas .city { position: relative; left: 30px; }