Better docs for table-responsive classes (#24438)
This commit is contained in:
parent
1f43fe970b
commit
0c67ab1fa6
|
@ -579,11 +579,48 @@ Regular table background variants are not available with the dark table, however
|
||||||
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
|
||||||
{{ callout-include | markdownify }}
|
{{ callout-include | markdownify }}
|
||||||
|
|
||||||
|
|
||||||
|
## Captions
|
||||||
|
|
||||||
|
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<table class="table">
|
||||||
|
<caption>List of users</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">First Name</th>
|
||||||
|
<th scope="col">Last Name</th>
|
||||||
|
<th scope="col">Username</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Mark</td>
|
||||||
|
<td>Otto</td>
|
||||||
|
<td>@mdo</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Jacob</td>
|
||||||
|
<td>Thornton</td>
|
||||||
|
<td>@fat</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Larry</td>
|
||||||
|
<td>the Bird</td>
|
||||||
|
<td>@twitter</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{% endexample %}
|
||||||
|
|
||||||
## Responsive tables
|
## Responsive 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.
|
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding `.table-responsive` class on `.table`. Or, pick a maximum breakpoint with which to have a responsive table up to by adding `.table-responsive{-sm|-md|-lg|-xl}`.
|
||||||
|
|
||||||
For responsive tables that always scroll horizontally when the table is wider than its container, add the `.table-responsive` class on `.table`.
|
|
||||||
|
|
||||||
{% callout warning %}
|
{% callout warning %}
|
||||||
#### Vertical clipping/truncation
|
#### Vertical clipping/truncation
|
||||||
|
@ -591,6 +628,8 @@ For responsive tables that always scroll horizontally when the table is wider th
|
||||||
Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
|
Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
|
||||||
{% endcallout %}
|
{% endcallout %}
|
||||||
|
|
||||||
|
### Always responsive
|
||||||
|
|
||||||
<div class="bd-example">
|
<div class="bd-example">
|
||||||
<table class="table table-responsive">
|
<table class="table table-responsive">
|
||||||
<thead>
|
<thead>
|
||||||
|
@ -697,41 +736,57 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
|
||||||
</table>
|
</table>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
### Breakpoint specific
|
||||||
|
|
||||||
## Captions
|
Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
|
||||||
|
|
||||||
A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
<div class="bd-example">
|
||||||
|
{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
|
||||||
{% example html %}
|
<table class="table table-responsive{{ bp.abbr }}">
|
||||||
<table class="table">
|
|
||||||
<caption>List of users</caption>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">#</th>
|
<th scope="col">#</th>
|
||||||
<th scope="col">First Name</th>
|
<th scope="col">Table heading</th>
|
||||||
<th scope="col">Last Name</th>
|
<th scope="col">Table heading</th>
|
||||||
<th scope="col">Username</th>
|
<th scope="col">Table heading</th>
|
||||||
|
<th scope="col">Table heading</th>
|
||||||
|
<th scope="col">Table heading</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">1</th>
|
<th scope="row">1</th>
|
||||||
<td>Mark</td>
|
<td>Table cell</td>
|
||||||
<td>Otto</td>
|
<td>Table cell</td>
|
||||||
<td>@mdo</td>
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">2</th>
|
<th scope="row">2</th>
|
||||||
<td>Jacob</td>
|
<td>Table cell</td>
|
||||||
<td>Thornton</td>
|
<td>Table cell</td>
|
||||||
<td>@fat</td>
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">3</th>
|
<th scope="row">3</th>
|
||||||
<td>Larry</td>
|
<td>Table cell</td>
|
||||||
<td>the Bird</td>
|
<td>Table cell</td>
|
||||||
<td>@twitter</td>
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
|
<td>Table cell</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{% endexample %}
|
{% endunless %}{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}
|
||||||
|
{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
|
||||||
|
<table class="table table-responsive{{ bp.abbr }}">
|
||||||
|
...
|
||||||
|
</table>
|
||||||
|
{% endunless %}{% endfor %}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
Loading…
Reference in New Issue