diff options
| author | Patrick Yeo <[email protected]> | 2017-09-04 15:35:24 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-09-04 15:35:24 -0700 |
| commit | 59631a6f040bcd4f31fde87666e703ae0b8790e8 (patch) | |
| tree | 8943f8beebcce897ec877f1e5f2e78120c034ef3 /docs/4.0/content | |
| parent | 6c402a6c7c7c6e01cab03fcaa750d8980432a774 (diff) | |
| download | bootstrap-59631a6f040bcd4f31fde87666e703ae0b8790e8.tar.xz bootstrap-59631a6f040bcd4f31fde87666e703ae0b8790e8.zip | |
v4 docs Update Table Responsive to include `.table-responsive{-sm|-md|-lg|-xl}` (#23665)
Diffstat (limited to 'docs/4.0/content')
| -rw-r--r-- | docs/4.0/content/tables.md | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index 9de7c5553..515b9b19b 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> |