/* Wrap your table in a container: <div class="table-wrap">...</div> */
/* Keeps table layout, best when you want to keep the table “as a table” and users can swipe sideways. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse; /* or separate if you want spacing */
  min-width: 600px; /* prevents squishing; adjust to your table */
}

.table-wrap th,
.table-wrap td {
  padding: 0.75rem;
  text-align: left;
  white-space: nowrap; /* optional: prevents ugly wrapping */
}

/* Optional: make header stick while scrolling vertically */
.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}