How to correctly separate and align table header and footer?-CodePudding

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 >
        <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;
}

CodePudding user response：

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