From 6e10aeee790797a93869e92a662a0d2c9c49aa46 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 8 Jun 2017 17:58:31 -0700
Subject: [PATCH 1/2]  Generate series of `.table-responsive-*` classes to
 accomodate overflowing tables in a variety of screen sizes

---
 scss/_tables.scss | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 36c3dab77a2a..35581a5f7cd1 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -150,20 +150,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;
+        }
+      }
     }
   }
 }

From c1e42e314935b6cc24904a2bcb4bdc15cb26cba1 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Mon, 12 Jun 2017 13:29:55 -0700
Subject: [PATCH 2/2] Add momentum scrolling on responsive tables for webkit
 touch devices

---
 scss/_tables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/_tables.scss b/scss/_tables.scss
index 35581a5f7cd1..787e1678c4c5 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -163,6 +163,7 @@
         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;`