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) {
|
||||
.bs-table-scrollable {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.bs-table-scrollable .bs-table {
|
||||
.bs-table-scrollable .table {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
.bs-table-scrollable .bs-table th,
|
||||
.bs-table-scrollable .bs-table td {
|
||||
.bs-table-scrollable .table th,
|
||||
.bs-table-scrollable .table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bs-table-scrollable .bs-table th:first-child,
|
||||
.bs-table-scrollable .bs-table td:first-child {
|
||||
.bs-table-scrollable .table th:first-child,
|
||||
.bs-table-scrollable .table td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.bs-table-scrollable .bs-table th:last-child,
|
||||
.bs-table-scrollable .bs-table td:last-child {
|
||||
.bs-table-scrollable .table th:last-child,
|
||||
.bs-table-scrollable .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 {
|
||||
.bs-table-scrollable .table tr:last-child th,
|
||||
.bs-table-scrollable .table tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
@ -608,7 +609,7 @@ body {
|
|||
------------------------- */
|
||||
.responsive-utilities-test {
|
||||
margin-top: 5px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
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>
|
||||
|
||||
<h3>Responsive classes</h3>
|
||||
<div class="hidden-sm">
|
||||
<div class="bs-scrollable-table">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
|
@ -2138,27 +2138,29 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
|
||||
<h3>Print classes</h3>
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-scrollable-table">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue