How to correctly separate and align table header and footer?

I am having trouble to properly space the header cells and aligning the 2nd footer cell with the 3rd data cell. I would like to properly space the header cells and align the 2nd footer cell exactly under the 3rd column!

Just a beginner trying to practice. Help would be really appreciated!

HTML:

<table>
      <tr class="headings_row">
        <th>Country</th>
        <th>Order ID</th>
        <th>Order Amount</th>
      </tr>
      <tr>
        <td>USA</td>
        <td>1000</td>
        <td>$1,300</td>
      </tr>
      <tr>
        <td>USA</td>
        <td>1001</td>
        <td>$700</td>
      </tr>
      <tr>
        <td>CA</td>
        <td>1002</td>
        <td>$2,000</td>
      </tr>
      <tr>
        <td>CA</td>
        <td>1003</td>
        <td>$1,000</td>
      </tr>
      <tfoot>
        <tr>
          <th>Total</th>
          <th colspan="2">$5,000</th>
        </tr>
      </tfoot>
    </table>

CSS:

th:nth-child(even) {
  background-color: #427fef;
}

th:nth-child(odd) {
  background-color: #427fef;
}

tr:nth-child(odd) {
  background-color: #eef7ff;
}

table {
  border: #c4dcf3;
  border-collapse: collapse;
}

.headings_row {
  border-spacing: 10px;
}

Here:

tfoot th {
  text-align: left;
}

th:nth-child(even) {
  background-color: #427fef;
}

th:nth-child(odd) {
  background-color: #427fef;
}

tr:nth-child(odd) {
  background-color: #eef7ff;
}

table {
  border: #c4dcf3;
  border-collapse: collapse;
}

.headings_row {
  border-spacing: 10px;
}

<table>
  <tr class="headings_row">
    <th>Country</th>
    <th>Order ID</th>
    <th>Order Amount</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>1000</td>
    <td>$1,300</td>
  </tr>
  <tr>
    <td>USA</td>
    <td>1001</td>
    <td>$700</td>
  </tr>
  <tr>
    <td>CA</td>
    <td>1002</td>
    <td>$2,000</td>
  </tr>
  <tr>
    <td>CA</td>
    <td>1003</td>
    <td>$1,000</td>
  </tr>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <th>$5,000</th>
    </tr>
  </tfoot>
</table>