rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Patrick Yeo 2017-09-04 15:35:24 -07:00 committed by Mark Otto
parent 6c402a6c7c
commit 59631a6f04
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/4.0/content/tables.md
View File

@ -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>