root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Move .table-responsive to a parent class instead of a modifier

This commit is contained in:
Mark Otto 2017-12-22 17:58:56 -08:00 committed by Mark Otto
parent aacfcc248d
commit eb60521c03
2 changed files with 112 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -553,7 +553,7 @@ 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 }}
Create responsive tables by adding `.table-responsive{-sm|-md|-lg|-xl}` to any `.table` to make them scroll horizontally at each `max-width` breakpoint of 575.99px, 767.99px, 991.99px, and 1119.99px, respectively. Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of 575.99px, 767.99px, 991.99px, and 1119.99px, respectively.
{% capture callout-include %}{% include callout-info-mediaqueries-breakpoints.md %}{% endcapture %} {% capture callout-include %}{% include callout-info-mediaqueries-breakpoints.md %}{% endcapture %}
{{ callout-include | markdownify }} {{ callout-include | markdownify }}
@ -598,120 +598,83 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
## Responsive tables ## Responsive tables
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}`. Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.
{% callout warning %} {% callout warning %}
#### Vertical clipping/truncation ##### Vertical clipping/truncation
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 ### Always responsive
<div class="bd-example"> Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
<table class="table table-responsive">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
<th scope="col">Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<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>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<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>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<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-lg"> <div class="bd-example">
<div class="table-responsive">
<table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th scope="row">1</th> <th scope="row">1</th>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr> </tr>
<tr> <tr>
<th scope="row">3</th> <th scope="row">3</th>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
{% highlight html %} {% highlight html %}
<table class="table table-responsive"> <div class="table-responsive">
<table class="table">
... ...
</table> </table>
</div>
{% endhighlight %} {% endhighlight %}
### Breakpoint specific ### Breakpoint specific
@ -720,51 +683,55 @@ Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables u
<div class="bd-example"> <div class="bd-example">
{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %} {% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
<table class="table table-responsive{{ bp.abbr }}"> <div class="table-responsive{{ bp.abbr }}">
<table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
<th scope="col">Table heading</th> <th scope="col">Heading</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th scope="row">1</th> <th scope="row">1</th>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">2</th>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
</tr> </tr>
<tr> <tr>
<th scope="row">3</th> <th scope="row">3</th>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
<td>Table cell</td> <td>Cell</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% endunless %}{% endfor %} {% endunless %}{% endfor %}
</div> </div>
{% highlight html %} {% highlight html %}
{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %} {% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
<table class="table table-responsive{{ bp.abbr }}"> <div class="table-responsive{{ bp.abbr }}">
<table class="table">
... ...
</table> </table>
</div>
{% endunless %}{% endfor %} {% endunless %}{% endfor %}
{% endhighlight %} {% endhighlight %}

2
scss/_tables.scss
View File

@ -171,7 +171,7 @@
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 -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;` // Prevent double border on horizontal scroll due to use of `display: block;`
&.table-bordered { > .table-bordered {
border: 0; border: 0;
} }
} }