Таблицы на телефоне: сдвиг, карточки или меньше колонок

<div class="table-wrap" role="region" aria-labelledby="worktops-caption" tabindex="0">
  <table class="table">
    <caption id="worktops-caption">Столешницы: цена и срок</caption>
    <thead>
      <tr>
        <th scope="col">Материал</th>
        <th scope="col">Толщина</th>
        <th scope="col" class="num">Цена за м², ₽</th>
        <th scope="col">Срок</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Дуб</th>
        <td>40 мм</td>
        <td class="num">18 500</td>
        <td>14 дней</td>
      </tr>
    </tbody>
  </table>
</div>

/* Таблица листается внутри своего блока, а не вся страница */
.table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Тени у краёв: заслонки едут вместе с содержимым, тени стоят на месте */
  background:
    linear-gradient(to right, var(--color-surface) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--color-surface) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.15), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.15), transparent) right / 0.75rem 100% no-repeat scroll;
}

.table {
  border-collapse: collapse;
  white-space: nowrap;
}

/* Первая колонка остаётся на месте */
.table tr > :first-child {
  position: sticky;
  left: 0;
  background: var(--color-surface);
}

/* Числа: правый край, цифры одинаковой ширины */
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Список заказов: на телефоне каждая строка становится карточкой */
@media (max-width: 47.99rem) {
  .table--cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .table--cards tr {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }

  /* <td data-label="Сумма">84 000</td> */
  .table--cards td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .table--cards td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
  }
}