Html 将表格标题和过滤器调整到表格的顶部边缘

.orders {
  --orders-columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--orders-columns), auto);
  column-gap: 2rem;
}

@media (min-width: 600px) {
  .orders {
    --orders-columns: 2;
  }
}

.orders__title {
  font-weight: bold;
}

.orders__filters {
  display: flex;
  align-items: flex-start;
}

@media (min-width: 600px) {
  .orders__filters {
    justify-content: flex-end;
  }
}

.orders__filter-label {
  display: block;
  padding-right: 0.5rem;
}

.orders__filter + .orders__filter-label {
  padding-left: 1rem;
}

.orders__table {
  grid-column: 1 / -1;
  /* remove browser-default styling so our caption aligns */
  border-collapse: collapse;
}

.orders__table th {
  text-align: left;
}

.orders__table th:last-child,
.orders__table td:last-child {
  /* align ending content with the filters above them */
  text-align: right;
}

<figure class='orders'>
  <figcaption class='orders__title'>My Orders Table</figcaption>
  <div class='orders__filters'>
    <label class='orders__filter-label' for='year-select' aria-label='Filter orders by year'>Year</label>
    <select class='orders__filter' name='year-select' id='year-select'>
      <option></option>
      <option value='2014'>2014</option>
      <option value='2015'>2015</option>
      <option value='2016'>2016</option>
      <option value='2017'>2017</option>
      <option value='2018'>2018</option>
      <option value='2019'>2019</option>
      <option value='2020'>2020</option>
      <option value='2021'>2021</option>
      <option value='2022'>2022</option>
      <option value='2023'>2023</option>
    </select>
    <label class='orders__filter-label' for='month-select' aria-label='Filter orders by month'>Month</label>
    <select class='orders__filter' name='month-select' id='month-select'>
      <option></option>
      <option value='1'>Janaury</option>
      <option value='2'>February</option>
      <option value='3'>March</option>
      <option value='4'>April</option>
      <option value='5'>May</option>
      <option value='6'>June</option>
      <option value='7'>July</option>
      <option value='8'>August</option>
      <option value='9'>September</option>
      <option value='10'>October</option>
      <option value='11'>November</option>
      <option value='12'>December</option>
    </select>
  </div>
  <table class='orders__table' aria-live='polite'>
    <thead>
      <th>Date</th>
      <th>Amount</th>
      <th>Comment</th>
    </thead>
    <tbody>
      <tr>
        <td>5.5.2020</td>
        <td>$50</td>
        <td>some_comment</td>
      </tr>
      <tr>
        <td>1.12.2022</td>
        <td>$10</td>
        <td>some_comment</td>
      </tr>
      <tr>
        <td>1.1.2023</td>
        <td>$33</td>
        <td>some_comment</td>
      </tr>
    </tbody>
  </table>
</figure>