Skip to content

Commit

Permalink
Add responsive tables with help of .table-responsive wrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Aug 19, 2013
1 parent 1a8d1b7 commit e989acf
Show file tree
Hide file tree
Showing 8 changed files with 563 additions and 381 deletions.
1 change: 1 addition & 0 deletions _includes/nav-css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
31 changes: 1 addition & 30 deletions assets/css/docs.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

115 changes: 108 additions & 7 deletions css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@ <h3 id="grid-media-queries">Media queries</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>
<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>
Expand Down Expand Up @@ -1217,11 +1217,10 @@ <h2 id="tables-condensed">Condensed table</h2>
{% 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">
Expand Down Expand Up @@ -1332,6 +1331,108 @@ <h2 id="tables-contextual-classes">Contextual classes</h2>
</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>


Expand Down Expand Up @@ -2117,7 +2218,7 @@ <h1>Responsive utilities</h1>
<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>
Expand Down Expand Up @@ -2204,7 +2305,7 @@ <h3>Responsive classes</h3>
</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>
Expand Down
49 changes: 49 additions & 0 deletions dist/css/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit e989acf

Please sign in to comment.