From: Patrick Yeo <pyeo717@gmail.com>
Date: Mon, 4 Sep 2017 22:35:24 +0000 (-0700)
Subject: v4 docs Update Table Responsive to include `.table-responsive{-sm|-md|-lg|-xl}` ... 
X-Git-Tag: v4.0.0-beta.2~287
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=59631a6f040bcd4f31fde87666e703ae0b8790e8;p=thirdparty%2Fbootstrap.git

v4 docs Update Table Responsive to include `.table-responsive{-sm|-md|-lg|-xl}` (#23665)
---

diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 9de7c55536..515b9b19b1 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -581,7 +581,9 @@ Regular table background variants are not available with the dark table, however
 
 ## Responsive tables
 
-Create responsive tables by adding `.table-responsive` to any `.table` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
+Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `.table` to make them scroll horizontally at each `max-width` breakpoint 575px, 767px, 991px, and 1199px, respectively.
+
+For responsive tables that always scroll horizontally when the table is wider than its container, add the `.table-responsive` class on `.table`.
 
 {% callout warning %}
 #### Vertical clipping/truncation
@@ -600,6 +602,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
         <th>Table heading</th>
         <th>Table heading</th>
         <th>Table heading</th>
+        <th>Table heading</th>
+        <th>Table heading</th>
+        <th>Table heading</th>
       </tr>
     </thead>
     <tbody>
@@ -611,6 +616,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
         <td>Table cell</td>
         <td>Table cell</td>
         <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
       </tr>
       <tr>
         <th scope="row">2</th>
@@ -620,6 +628,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
         <td>Table cell</td>
         <td>Table cell</td>
         <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
       </tr>
       <tr>
         <th scope="row">3</th>
@@ -629,11 +640,14 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
         <td>Table cell</td>
         <td>Table cell</td>
         <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
+        <td>Table cell</td>
       </tr>
     </tbody>
   </table>
 
-  <table class="table table-bordered table-responsive">
+  <table class="table table-bordered table-responsive-lg">
     <thead>
       <tr>
         <th>#</th>