html - 本文を中央に配置し、列をテキストで揃える: 左?3 つのヘッダー列を持つ HTML5 テーブルがあります。それぞれcolspan=2、合計 6 列の幅です。各ヘッダーの下には、そのヘッダーに対応する 2 つの本文列があります。個々の列を左に配置しましたが、本文全体を中央に配置して、ヘッダーに合わせます。が定義されmargin: 0 autoていることを確認するためのトリックを試しましたが、機能していません。

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