用html和css制作表格，但没有任何东西是对齐的

Question

我目前正在网站的底部制作一个表格。有 3 列，我正在尝试将它们对齐。我的 CSS 中也有文本对齐。但是，中间列在右侧，表中的框也在右侧。我真的不知道是什么原因造成的，以及我该如何解决它/更好的方法来做到这一点。一些帮助将不胜感激！

.counties {
text-align: center;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-size: 40px;
color: white;
background: #7d7d7d;
border-radius: 40px;
margin: 10px;
}

<table class="counties" style="width:100%">
<tr>
<th>Counties</th>
<th>Cases</th>
<th>Deaths</th>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
</table>

Answer 1

中心列不居中于表格，因为表格会调整列的宽度以适应其内容。"国家"一词比"病例"或"死亡"长，因此该列更宽，将中间列向右推。

当table-layoutCSS 属性设置为auto时，会发生这种情况，默认情况下是这样。要使列的宽度相等，请将table-layout设置为fixed。

在下面的示例中，第一个表具有table-layout: auto，第二个表具有table-layout: fixed。您可以看到，在第二个选项中，中心列位于表格的真正中间，正如我认为您所希望的那样。

table, th, td {
border: 1px solid black;
}
table {
text-align: center;
border-collapse: collapse;
}
.table-1 {
table-layout: auto;
}
.table-2 {
table-layout: fixed;
}

<table class="table-1" style="width:300px">
<tr>
<th>Counties</th>
<th>Cases</th>
<th>Deaths</th>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
</table>
<table class="table-2" style="width:300px">
<tr>
<th>Counties</th>
<th>Cases</th>
<th>Deaths</th>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
</table>