mo tables mo responsive or whatever the hell that means
This commit is contained in:
parent
572174652e
commit
2967cc1d60
|
@ -549,28 +549,29 @@ body {
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.bs-table-scrollable {
|
.bs-table-scrollable {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-bottom: 15px;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
.bs-table-scrollable .bs-table {
|
.bs-table-scrollable .table {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
.bs-table-scrollable .bs-table th,
|
.bs-table-scrollable .table th,
|
||||||
.bs-table-scrollable .bs-table td {
|
.bs-table-scrollable .table td {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.bs-table-scrollable .bs-table th:first-child,
|
.bs-table-scrollable .table th:first-child,
|
||||||
.bs-table-scrollable .bs-table td:first-child {
|
.bs-table-scrollable .table td:first-child {
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
.bs-table-scrollable .bs-table th:last-child,
|
.bs-table-scrollable .table th:last-child,
|
||||||
.bs-table-scrollable .bs-table td:last-child {
|
.bs-table-scrollable .table td:last-child {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
.bs-table-scrollable .bs-table tr:last-child th,
|
.bs-table-scrollable .table tr:last-child th,
|
||||||
.bs-table-scrollable .bs-table tr:last-child td {
|
.bs-table-scrollable .table tr:last-child td {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -608,7 +609,7 @@ body {
|
||||||
------------------------- */
|
------------------------- */
|
||||||
.responsive-utilities-test {
|
.responsive-utilities-test {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-left: 0;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
overflow: hidden; /* clear floats */
|
overflow: hidden; /* clear floats */
|
||||||
}
|
}
|
||||||
|
|
46
css.html
46
css.html
|
@ -2086,7 +2086,7 @@ For example, <code><section></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="hidden-sm">
|
<div class="bs-scrollable-table">
|
||||||
<table class="table table-bordered table-striped responsive-utilities">
|
<table class="table table-bordered table-striped responsive-utilities">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -2138,27 +2138,29 @@ For example, <code><section></code> should be wrapped as inline.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Print classes</h3>
|
<h3>Print classes</h3>
|
||||||
<table class="table table-bordered table-striped responsive-utilities">
|
<div class="bs-scrollable-table">
|
||||||
<thead>
|
<table class="table table-bordered table-striped responsive-utilities">
|
||||||
<tr>
|
<thead>
|
||||||
<th>Class</th>
|
<tr>
|
||||||
<th>Browser</th>
|
<th>Class</th>
|
||||||
<th>Print</th>
|
<th>Browser</th>
|
||||||
</tr>
|
<th>Print</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<th><code>.visible-print</code></th>
|
<tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<th><code>.visible-print</code></th>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tr>
|
<td class="is-visible">Visible</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th><code>.hidden-print</code></th>
|
<tr>
|
||||||
<td class="is-visible">Visible</td>
|
<th><code>.hidden-print</code></th>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-visible">Visible</td>
|
||||||
</tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>When to use</h3>
|
<h3>When to use</h3>
|
||||||
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
|
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
|
||||||
|
|
Loading…
Reference in New Issue