kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Responsivey docs table for grid section

Browse source
This commit is contained in:
Mark Otto 2013-07-26 21:28:44 -07:00
parent 8349236f8c
commit 70fa8ef4b0
2 changed files with 82 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
assets/css/docs.css
View file

@ -545,6 +545,36 @@ body {
/* Responsive docs
-------------------------------------------------- */
/* Responsive (scrollable) doc tables */
@media (max-width: 768px) {
.bs-table-scrollable {
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid #ddd;
}
.bs-table-scrollable .bs-table {
margin-bottom: 0;
border: 0;
}
.bs-table-scrollable .bs-table th,
.bs-table-scrollable .bs-table td {
white-space: nowrap;
}
.bs-table-scrollable .bs-table th:first-child,
.bs-table-scrollable .bs-table td:first-child {
border-left: 0;
}
.bs-table-scrollable .bs-table th:last-child,
.bs-table-scrollable .bs-table td:last-child {
border-right: 0;
}
.bs-table-scrollable .bs-table tr:last-child th,
.bs-table-scrollable .bs-table tr:last-child td {
border-bottom: 0;
}
}
/* Related: responsive utilities tables */
.table code {
font-size: 13px;

2
css.html
View file

@ -78,6 +78,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<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">
<thead>
<tr>
@ -128,6 +129,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
</tr>
</tbody>
</table>
</div>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
<p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>