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