我有一个带有 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;
}