mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-23 21:53:25 +02:00
Code Issues Releases Wiki Activity

Merge pull request #21208 from twbs/table-responsive-docs

Browse Source 
Update .table-responsive
This commit is contained in:
Mark Otto
2016-11-26 02:03:12 -08:00
committed by GitHub
parent 8cd29af7ee b88c32cf17
commit b9947152c6
2 changed files with 139 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
docs/content/tables.md
View File

@@ -442,52 +442,50 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
Use contextual classes to color table rows or individual cells. Use contextual classes to color table rows or individual cells.
<div class="table-responsive"> <table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped"> <colgroup>
<colgroup> <col class="col-1">
<col class="col-1"> <col class="col-7">
<col class="col-7"> </colgroup>
</colgroup> <thead>
<thead> <tr>
<tr> <th>Class</th>
<th>Class</th> <th>Description</th>
<th>Description</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th scope="row">
<th scope="row"> <code>.table-active</code>
<code>.table-active</code> </th>
</th> <td>Applies the hover color to a particular row or cell</td>
<td>Applies the hover color to a particular row or cell</td> </tr>
</tr> <tr>
<tr> <th scope="row">
<th scope="row"> <code>.table-success</code>
<code>.table-success</code> </th>
</th> <td>Indicates a successful or positive action</td>
<td>Indicates a successful or positive action</td> </tr>
</tr> <tr>
<tr> <th scope="row">
<th scope="row"> <code>.table-info</code>
<code>.table-info</code> </th>
</th> <td>Indicates a neutral informative change or action</td>
<td>Indicates a neutral informative change or action</td> </tr>
</tr> <tr>
<tr> <th scope="row">
<th scope="row"> <code>.table-warning</code>
<code>.table-warning</code> </th>
</th> <td>Indicates a warning that might need attention</td>
<td>Indicates a warning that might need attention</td> </tr>
</tr> <tr>
<tr> <th scope="row">
<th scope="row"> <code>.table-danger</code>
<code>.table-danger</code> </th>
</th> <td>Indicates a dangerous or potentially negative action</td>
<td>Indicates a dangerous or potentially negative action</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
<div class="bd-example"> <div class="bd-example">
<table class="table"> <table class="table">
@@ -670,7 +668,7 @@ Regular table background variants are not available with the inverse table, howe
## Responsive tables ## Responsive tables
Create responsive tables by wrapping any `.table` in `.table-responsive` 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` 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.
{% callout warning %} {% callout warning %}
#### Vertical clipping/truncation #### Vertical clipping/truncation
@@ -693,103 +691,97 @@ For more information, read [this Stack Overflow answer](https://stackoverflow.co
{% endcallout %} {% endcallout %}
<div class="bd-example"> <div class="bd-example">
<div class="table-responsive"> <table class="table table-responsive">
<table class="table"> <thead>
<thead> <tr>
<tr> <th>#</th>
<th>#</th> <th>Table heading</th>
<th>Table heading</th> <th>Table heading</th>
<th>Table heading</th> <th>Table heading</th>
<th>Table heading</th> <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>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th scope="row">1</th>
<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>
<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>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>
<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>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>
<td>Table cell</td> <td>Table cell</td>
<td>Table cell</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
<div class="table-responsive"> <table class="table table-bordered table-responsive">
<table class="table table-bordered"> <thead>
<thead> <tr>
<tr> <th>#</th>
<th>#</th> <th>Table heading</th>
<th>Table heading</th> <th>Table heading</th>
<th>Table heading</th> <th>Table heading</th>
<th>Table heading</th> <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>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <th scope="row">1</th>
<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>
<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>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>
<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>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>
<td>Table cell</td> <td>Table cell</td>
<td>Table cell</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="table-responsive"> <table class="table table-responsive"">
<table class="table"> ...
... </table>
</table>
</div>
{% endhighlight %} {% endhighlight %}

13
scss/_tables.scss
View File

@@ -136,8 +136,8 @@
// Responsive tables // Responsive tables
// //
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly // Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
// by enabling horizontal scrolling. Only applies <768px. Everything above that // enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally. // will display normally.
.table-responsive { .table-responsive {
@@ -145,11 +145,12 @@
width: 100%; width: 100%;
min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) min-height: 0%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
overflow-x: auto; overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
// TODO: find out if we need this still. // Prevent double border on horizontal scroll due to use of `display: block;`
// &.table-bordered {
// border: $table-border-width solid $table-border-color; border: 0;
// -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 }
} }