Skip to content

B
bootstrap
Commit e989acfc authored by Mark Otto's avatar Mark Otto
Browse files
Options

Add responsive tables with help of `.table-responsive` wrapper

parent 1a8d1b75
Expand all Show whitespace changes
Inline Side-by-side
Showing with 563 additions and 381 deletions
_includes/nav-css.html
View file @ e989acfc
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
<li><a href="#tables-hover-rows">Hover rows</a></li> <li><a href="#tables-hover-rows">Hover rows</a></li>
<li><a href="#tables-condensed">Condensed table</a></li> <li><a href="#tables-condensed">Condensed table</a></li>
<li><a href="#tables-contextual-classes">Contextual classes</a></li> <li><a href="#tables-contextual-classes">Contextual classes</a></li>
<li><a href="#tables-responsive">Responsive tables</a></li>
</ul> </ul>
</li> </li>
<li> <li>
......
assets/css/docs.css
View file @ e989acfc
...@@ -862,36 +862,7 @@ body { ...@@ -862,36 +862,7 @@ body {
*/ */
/* Responsive (scrollable) doc tables */ /* Responsive (scrollable) doc tables */
@media (max-width: 768px) { .table-responsive .highlight pre {
.bs-table-scrollable {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid #ddd;
}
.bs-table-scrollable .table {
margin-bottom: 0;
border: 0;
}
.bs-table-scrollable .table th,
.bs-table-scrollable .table td {
white-space: nowrap;
}
.bs-table-scrollable .table th:first-child,
.bs-table-scrollable .table td:first-child {
border-left: 0;
}
.bs-table-scrollable .table th:last-child,
.bs-table-scrollable .table td:last-child {
border-right: 0;
}
.bs-table-scrollable .table tr:last-child th,
.bs-table-scrollable .table tr:last-child td {
border-bottom: 0;
}
}
.bs-table-scrollable .highlight pre {
white-space: normal; white-space: normal;
} }
......
css.html
View file @ e989acfc
...@@ -98,8 +98,8 @@ base_url: "../" ...@@ -98,8 +98,8 @@ base_url: "../"
<h3 id="grid-options">Grid options</h3> <h3 id="grid-options">Grid options</h3>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p> <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped bs-table"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
...@@ -1217,11 +1217,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1217,11 +1217,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h2 id="tables-contextual-classes">Contextual classes</h2> <h2 id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p> <p>Use contextual classes to color table rows or individual cells.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped bs-table"> <table class="table table-bordered table-striped">
<colgroup> <colgroup>
<col class="col-lg-1"> <col class="col-lg-1">
<col class="col-lg-7"> <col class="col-lg-7">
...@@ -1332,6 +1331,108 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -1332,6 +1331,108 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr> </tr>
{% endhighlight %} {% endhighlight %}
<h2 id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px).</p>
<div class="bs-example">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<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>
</tr>
</thead>
<tbody>
<tr>
<td>1</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>
<td>2</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>
<td>3</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>
</div><!-- /.table-responsive -->
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<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>
</tr>
</thead>
<tbody>
<tr>
<td>1</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>
<td>2</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>
<td>3</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>
</div><!-- /.table-responsive -->
</div><!-- /example -->
{% highlight html %}
<div class="table-responsive">
<table class="table">
...
</table>
</div>
{% endhighlight %}
</div> </div>
...@@ -2117,7 +2218,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2117,7 +2218,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p> <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<h3>Responsive classes</h3> <h3>Responsive classes</h3>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities"> <table class="table table-bordered table-striped responsive-utilities">
<thead> <thead>
<tr> <tr>
...@@ -2204,7 +2305,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2204,7 +2305,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<h3>Print classes</h3> <h3>Print classes</h3>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities"> <table class="table table-bordered table-striped responsive-utilities">
<thead> <thead>
<tr> <tr>
......
dist/css/bootstrap.css
View file @ e989acfc
...@@ -1573,6 +1573,55 @@ table th[class^="col-"] { ...@@ -1573,6 +1573,55 @@ table th[class^="col-"] {
border-color: #f8e5be; border-color: #f8e5be;
} }
@media (max-width: 768px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid #dddddd;
}
.table-responsive > .table {
margin-bottom: 0;
background-color: #fff;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
.table-responsive > .table-bordered {
border: 0;
}
.table-responsive > .table-bordered > thead > tr > th:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.table-responsive > .table-bordered > thead > tr > th:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.table-responsive > .table-bordered > thead > tr:last-child > th,
.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
.table-responsive > .table-bordered > thead > tr:last-child > td,
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
fieldset { fieldset {
padding: 0; padding: 0;
margin: 0; margin: 0;
......
dist/css/bootstrap.min.css
View file @ e989acfc
This source diff could not be displayed because it is too large. You can view the blob instead.
getting-started.html
View file @ e989acfc
...@@ -328,6 +328,7 @@ bootstrap/ ...@@ -328,6 +328,7 @@ bootstrap/
<h3 id="migration-classes">Major class changes</h3> <h3 id="migration-classes">Major class changes</h3>
<p></p> <p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -438,10 +439,12 @@ bootstrap/ ...@@ -438,10 +439,12 @@ bootstrap/
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive -->
<h3 id="migration-new">What's new</h3> <h3 id="migration-new">What's new</h3>
<p>We've added a few new elements and changed some existing ones. Here's their new or updated classes.</p> <p>We've added a few new elements and changed some existing ones. Here's their new or updated classes.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -552,10 +555,13 @@ bootstrap/ ...@@ -552,10 +555,13 @@ bootstrap/
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive -->
<h3 id="migration-dropped">What's removed</h3> <h3 id="migration-dropped">What's removed</h3>
<p>The following elements have been dropped or changed in v3.</p> <p>The following elements have been dropped or changed in v3.</p>
<table class="table table-bordered table-striped bs-table"> <div class="table-responsive">
<table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th>Element</th> <th>Element</th>
...@@ -626,6 +632,8 @@ bootstrap/ ...@@ -626,6 +632,8 @@ bootstrap/
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive -->
<h3 id="migration-notes">Additional notes</h3> <h3 id="migration-notes">Additional notes</h3>
<p>We've made many underlying changes in v3 that are not immediately apparent without closer inspection. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.</p> <p>We've made many underlying changes in v3 that are not immediately apparent without closer inspection. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.</p>
......
javascript.html
View file @ e989acfc
This diff is collapsed.
less/tables.less
View file @ e989acfc
...@@ -13,7 +13,6 @@ th { ...@@ -13,7 +13,6 @@ th {
// Baseline styles // Baseline styles
// ---------------
.table { .table {
width: 100%; width: 100%;
...@@ -59,9 +58,7 @@ th { ...@@ -59,9 +58,7 @@ th {
} }
// Condensed table w/ half padding // Condensed table w/ half padding
// -------------------------------
.table-condensed { .table-condensed {
thead, thead,
...@@ -77,9 +74,9 @@ th { ...@@ -77,9 +74,9 @@ th {
} }
// Bordered version // Bordered version
// ---------------- //
// Add borders all around the table and between all the columns.
.table-bordered { .table-bordered {
border: 1px solid @table-border-color; border: 1px solid @table-border-color;
...@@ -104,11 +101,10 @@ th { ...@@ -104,11 +101,10 @@ th {
} }
// Zebra-striping // Zebra-striping
// -------------- //
// Default zebra-stripe styles (alternating gray and transparent backgrounds) // Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped { .table-striped {
> tbody { > tbody {
> tr:nth-child(odd) { > tr:nth-child(odd) {
...@@ -121,11 +117,10 @@ th { ...@@ -121,11 +117,10 @@ th {
} }
// Hover effect // Hover effect
// ------------ //
// Placed here since it has to come after the potential zebra striping // Placed here since it has to come after the potential zebra striping
.table-hover { .table-hover {
> tbody { > tbody {
> tr:hover { > tr:hover {
...@@ -138,11 +133,10 @@ th { ...@@ -138,11 +133,10 @@ th {
} }
// Table cell sizing // Table cell sizing
// ----------------- //
// Reset default table behavior // Reset default table behavior
table col[class^="col-"] { table col[class^="col-"] {
float: none; float: none;
display: table-column; display: table-column;
...@@ -158,9 +152,8 @@ table { ...@@ -158,9 +152,8 @@ table {
} }
// Table backgrounds // Table backgrounds
// ----------------- //
// Exact selectors below required to override `.table-striped` and prevent // Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables. // inheritance to nested tables.
...@@ -175,10 +168,69 @@ table { ...@@ -175,10 +168,69 @@ table {
} }
} }
// Contextual variants // Generate the contextual variants
// -------------------
.table-row-variant(success; @state-success-bg; @state-success-border); .table-row-variant(success; @state-success-bg; @state-success-border);
.table-row-variant(danger; @state-danger-bg; @state-danger-border); .table-row-variant(danger; @state-danger-bg; @state-danger-border);
.table-row-variant(warning; @state-warning-bg; @state-warning-border); .table-row-variant(warning; @state-warning-bg; @state-warning-border);
// Responsive tables
//
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: @screen-sm) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid @table-border-color;
// Tighten up spacing and give a background color
> .table {
margin-bottom: 0;
background-color: #fff;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment