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 Hide whitespace changes
Inline Side-by-side
Showing with 563 additions and 381 deletions
_includes/nav-css.html
View file @ e989acfc
......@@ -46,6 +46,7 @@
<li><a href="#tables-hover-rows">Hover rows</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-responsive">Responsive tables</a></li>
</ul>
</li>
<li>
......
assets/css/docs.css
View file @ e989acfc
......@@ -862,36 +862,7 @@ body {
*/
/* Responsive (scrollable) doc tables */
@media (max-width: 768px) {
.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 {
.table-responsive .highlight pre {
white-space: normal;
}
......
css.html
View file @ e989acfc
......@@ -98,8 +98,8 @@ base_url: "../"
<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>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped bs-table">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
......@@ -1217,11 +1217,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped bs-table">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-lg-1">
<col class="col-lg-7">
......@@ -1332,6 +1331,108 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr>
{% 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>
......@@ -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>
<h3>Responsive classes</h3>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
......@@ -2204,7 +2305,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<h3>Print classes</h3>
<div class="bs-table-scrollable">
<div class="table-responsive">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
......
dist/css/bootstrap.css
View file @ e989acfc
......@@ -1573,6 +1573,55 @@ table th[class^="col-"] {
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 {
padding: 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
This diff is collapsed.
javascript.html
View file @ e989acfc
This diff is collapsed.
less/tables.less
View file @ e989acfc
......@@ -13,7 +13,6 @@ th {
// Baseline styles
// ---------------
.table {
width: 100%;
......@@ -59,9 +58,7 @@ th {
}
// Condensed table w/ half padding
// -------------------------------
.table-condensed {
thead,
......@@ -77,9 +74,9 @@ th {
}
// Bordered version
// ----------------
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid @table-border-color;
......@@ -104,11 +101,10 @@ th {
}
// Zebra-striping
// --------------
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody {
> tr:nth-child(odd) {
......@@ -121,11 +117,10 @@ th {
}
// Hover effect
// ------------
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody {
> tr:hover {
......@@ -138,11 +133,10 @@ th {
}
// Table cell sizing
// -----------------
//
// Reset default table behavior
table col[class^="col-"] {
float: none;
display: table-column;
......@@ -158,9 +152,8 @@ table {
}
// Table backgrounds
// -----------------
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
......@@ -175,10 +168,69 @@ table {
}
}
// Contextual variants
// -------------------
// Generate the contextual variants
.table-row-variant(success; @state-success-bg; @state-success-border);
.table-row-variant(danger; @state-danger-bg; @state-danger-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