sass-site/source/assets/sass/components/_tables.scss

@use '../breakpoints';

$table-cell-padding: 1rem * 0.5;

.sl-c-table {
  margin: 1.5rem 0;
  border: 0;
  width: 100%;
  max-width: 100%;

  td,
  th {
    border: 0;
    padding: 0.75rem $table-cell-padding;
    vertical-align: top;
  }

  th,
  caption {
    text-align: left;
  }

  @include breakpoints.sl-breakpoint--medium-max {
    &-responsive {
      margin-bottom: 1.5rem;
      width: 100%;
      overflow: {
        x: auto;
        y: hidden;
      }

      table {
        margin-bottom: 0;
      }

      td {
        white-space: nowrap;
      }
    }
  }
}