
table {
  @extend %text--table;
  text-align: left;
}

thead {
  color: $color-table-heading;
  background-color: $color-table-background;
}

tr:nth-child(even) {
  background-color: $color-table-background-alt;
}

th {
  padding: $bl*3 $bl*2;
  border: 1px solid $color-table-border;
}

td {
  padding: $bl*3 $bl*2;
  border: 1px solid $color-table-border;
}
.table-wrapper {
  width: 100%;
  margin-bottom: $bl*3;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
}

.table-wrapper > .table > thead > tr > th,
.table-wrapper > .table > tbody > tr > th,
.table-wrapper > .table > tfoot > tr > th,
.table-wrapper > .table > thead > tr > td,
.table-wrapper > .table > tbody > tr > td,
.table-wrapper > .table > tfoot > tr > td {
  white-space: nowrap;
}

table {
  @extend %text--table;
  text-align: left;

  p {
    @extend %text--table;
    // NOTE that this is here to override sloppy formatting in the tables where p tags force a large font size.
  }
}

thead {
  color: $color-table-heading;
  background-color: $color-table-background;
}

tr:nth-child(even) {
  background-color: $color-table-background-alt;
}

th {
  padding: $bl*2;
  border: 1px solid $color-table-border;
}

td {
  padding: $bl*2;
  border: 1px solid $color-table-border;
}
Add scrollable styling to the tables.
Add scrollable styling to the tables.
