用html和css制作表,但是没有对齐

我目前正在网站底部制作表格。有3列,我正在尝试使其对齐。我的CSS中也有text-align。但是,中间一栏位于右侧,表格中的框也是如此。我真的不知道是什么原因造成的,以及如何解决这个问题/做这件事的更好方法。一些帮助将不胜感激!

.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>

`