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
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
...@@ -240,7 +240,7 @@ $('#myModal').on('show.bs.modal', function (e) { ...@@ -240,7 +240,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -280,7 +280,7 @@ $('#myModal').on('show.bs.modal', function (e) { ...@@ -280,7 +280,7 @@ $('#myModal').on('show.bs.modal', function (e) {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
<h3>Methods</h3> <h3>Methods</h3>
...@@ -306,7 +306,7 @@ $('#myModal').modal({ ...@@ -306,7 +306,7 @@ $('#myModal').modal({
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -333,7 +333,7 @@ $('#myModal').modal({ ...@@ -333,7 +333,7 @@ $('#myModal').modal({
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
{% highlight js %} {% highlight js %}
$('#myModal').on('hidden.bs.modal', function () { $('#myModal').on('hidden.bs.modal', function () {
// do something… // do something…
...@@ -480,7 +480,7 @@ $('.dropdown-toggle').dropdown() ...@@ -480,7 +480,7 @@ $('.dropdown-toggle').dropdown()
<p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p> <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -507,7 +507,7 @@ $('.dropdown-toggle').dropdown() ...@@ -507,7 +507,7 @@ $('.dropdown-toggle').dropdown()
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- ./bs-table-scrollable --> </div><!-- ./bs-table-responsive -->
{% highlight js %} {% highlight js %}
$('#myDropdown').on('show.bs.dropdown', function () { $('#myDropdown').on('show.bs.dropdown', function () {
// do something… // do something…
...@@ -602,7 +602,7 @@ $('[data-spy="scroll"]').each(function () { ...@@ -602,7 +602,7 @@ $('[data-spy="scroll"]').each(function () {
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -621,10 +621,10 @@ $('[data-spy="scroll"]').each(function () { ...@@ -621,10 +621,10 @@ $('[data-spy="scroll"]').each(function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- ./bs-table-scrollable --> </div><!-- ./bs-table-responsive -->
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -639,7 +639,7 @@ $('[data-spy="scroll"]').each(function () { ...@@ -639,7 +639,7 @@ $('[data-spy="scroll"]').each(function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- ./bs-table-scrollable --> </div><!-- ./bs-table-responsive -->
{% highlight js %} {% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () { $('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something… // do something…
...@@ -745,7 +745,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) ...@@ -745,7 +745,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
{% endhighlight %} {% endhighlight %}
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -764,7 +764,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) ...@@ -764,7 +764,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
{% highlight js %} {% highlight js %}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab e.target // activated tab
...@@ -814,7 +814,7 @@ $('#example').tooltip(options) ...@@ -814,7 +814,7 @@ $('#example').tooltip(options)
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -881,7 +881,7 @@ $('#example').tooltip(options) ...@@ -881,7 +881,7 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Data attributes for individual tooltips</h4> <h4>Data attributes for individual tooltips</h4>
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p> <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
...@@ -914,7 +914,7 @@ $('#example').tooltip(options) ...@@ -914,7 +914,7 @@ $('#example').tooltip(options)
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %} {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -941,7 +941,7 @@ $('#example').tooltip(options) ...@@ -941,7 +941,7 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
{% highlight js %} {% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () { $('#myTooltip').on('hidden.bs.tooltip', function () {
// do something… // do something…
...@@ -1036,7 +1036,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -1036,7 +1036,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1109,7 +1109,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -1109,7 +1109,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Data attributes for individual popovers</h4> <h4>Data attributes for individual popovers</h4>
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p> <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
...@@ -1138,7 +1138,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -1138,7 +1138,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<p>Hides and destroys an element's popover.</p> <p>Hides and destroys an element's popover.</p>
{% highlight js %}$('#element').popover('destroy'){% endhighlight %} {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1165,7 +1165,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -1165,7 +1165,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
{% highlight js %} {% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () { $('#myPopover').on('hidden.bs.popover', function () {
// do something… // do something…
...@@ -1222,7 +1222,7 @@ $('#myPopover').on('hidden.bs.popover', function () { ...@@ -1222,7 +1222,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p> <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1241,7 +1241,7 @@ $('#myPopover').on('hidden.bs.popover', function () { ...@@ -1241,7 +1241,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
{% highlight js %} {% highlight js %}
$('#my-alert').bind('closed.bs.alert', function () { $('#my-alert').bind('closed.bs.alert', function () {
// do something… // do something…
...@@ -1528,7 +1528,7 @@ $(".collapse").collapse() ...@@ -1528,7 +1528,7 @@ $(".collapse").collapse()
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1553,7 +1553,7 @@ $(".collapse").collapse() ...@@ -1553,7 +1553,7 @@ $(".collapse").collapse()
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
<h3>Methods</h3> <h3>Methods</h3>
...@@ -1576,7 +1576,7 @@ $('#myCollapsible').collapse({ ...@@ -1576,7 +1576,7 @@ $('#myCollapsible').collapse({
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p> <p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1605,7 +1605,7 @@ $('#myCollapsible').collapse({ ...@@ -1605,7 +1605,7 @@ $('#myCollapsible').collapse({
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
{% highlight js %} {% highlight js %}
$('#myCollapsible').on('hidden.bs.collapse', function () { $('#myCollapsible').on('hidden.bs.collapse', function () {
// do something… // do something…
...@@ -1752,7 +1752,7 @@ $('.carousel').carousel() ...@@ -1752,7 +1752,7 @@ $('.carousel').carousel()
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1783,7 +1783,7 @@ $('.carousel').carousel() ...@@ -1783,7 +1783,7 @@ $('.carousel').carousel()
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
<h3>Methods</h3> <h3>Methods</h3>
...@@ -1813,7 +1813,7 @@ $('.carousel').carousel({ ...@@ -1813,7 +1813,7 @@ $('.carousel').carousel({
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p> <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1832,7 +1832,7 @@ $('.carousel').carousel({ ...@@ -1832,7 +1832,7 @@ $('.carousel').carousel({
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
{% highlight js %} {% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () { $('#myCarousel').on('slide.bs.carousel', function () {
// do something… // do something…
...@@ -1888,7 +1888,7 @@ $('#myCarousel').on('slide.bs.carousel', function () { ...@@ -1888,7 +1888,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<div class="bs-table-scrollable"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1907,6 +1907,6 @@ $('#myCarousel').on('slide.bs.carousel', function () { ...@@ -1907,6 +1907,6 @@ $('#myCarousel').on('slide.bs.carousel', function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable --> </div><!-- /.table-responsive -->
</div> </div>
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