From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Fri, 9 Jun 2017 00:58:31 +0000 (-0700)
Subject:  Generate series of `.table-responsive-*` classes to accomodate overflowing tables... 
X-Git-Tag: v4.0.0-beta.2~328
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f66fa3fa2bf5973bf7a00205044a006009dba982;p=thirdparty%2Fbootstrap.git

 Generate series of `.table-responsive-*` classes to accomodate overflowing tables in a variety of screen sizes
---

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 0ef107a7b7..7804db620f 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -153,20 +153,26 @@
 
 // Responsive tables
 //
-// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
-// enabling horizontal scrolling. Only applies <768px. Everything above that
-// will display normally.
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
 
 .table-responsive {
-  @include media-breakpoint-down(md) {
-    display: block;
-    width: 100%;
-    overflow-x: auto;
-    -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;
+  @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;
+        -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;
+        }
+      }
     }
   }
 }