如何正确分隔和对齐table header 和页脚？

Question

我无法正确 space header 单元格并将第二个页脚单元格与第三个数据单元格对齐。我想正确 space header 单元格并将第二个页脚单元格恰好对齐在第三列下方！

刚开始尝试练习。非常感谢您的帮助！

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>,300</td>
      </tr>
      <tr>
        <td>USA</td>
        <td>1001</td>
        <td>0</td>
      </tr>
      <tr>
        <td>CA</td>
        <td>1002</td>
        <td>,000</td>
      </tr>
      <tr>
        <td>CA</td>
        <td>1003</td>
        <td>,000</td>
      </tr>
      <tfoot>
        <tr>
          <th>Total</th>
          <th colspan="2">,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;
}

Answer 1

这里：

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>,300</td>
  </tr>
  <tr>
    <td>USA</td>
    <td>1001</td>
    <td>0</td>
  </tr>
  <tr>
    <td>CA</td>
    <td>1002</td>
    <td>,000</td>
  </tr>
  <tr>
    <td>CA</td>
    <td>1003</td>
    <td>,000</td>
  </tr>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <th>,000</th>
    </tr>
  </tfoot>
</table>

如何正确分隔和对齐table header 和页脚？

How to correctly separate and align table header and footer?

html

css

cellspacing