Bootstrap CSS class .table-*-responsive

<table class="table table-responsive">
<!-- table content here -->
</table>

<table class="table table-sm-responsive"><!-- ... --></table>
<table class="table table-md-responsive"><!-- ... --></table>
<table class="table table-lg-responsive"><!-- ... --></table>
<table class="table table-xl-responsive"><!-- ... --></table>

/* _tables.scss:167 */
.table-responsive {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057

        // Prevent double border on horizontal scroll due to use of `display: block;`
        > .table-bordered {
          border: 0;
        }
      }
    }
  }
}