Center <table> body while columns are text-aligned: left? - html

Question

I have an HTML5 table with 3 header columns. They colspan=2 each, for a total of 6 columns wide. Under each header are 2 body columns that correspond to that header. I've got individual columns aligned left, but now I want the entire body center aligned so it lines up with the headers. I've tried the margin: 0 auto trick making sure I had a width defined and it's just not working.
Here is what it looks like now:
Here is my 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>
And my 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

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