diff --git a/assets/css/docs.css b/assets/css/docs.css index 307e8d07e3bb6a0fd51c2126a9d931a629742bda..8843d2480f9d5f1e1a028fe5ee9c45207f5d5428 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -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 */ } diff --git a/css.html b/css.html index e4378434a447de41efa1767f591d2f36ef10f98f..d2e552e9af528d15f5c58dcf4a179fb869e4c679 100644 --- a/css.html +++ b/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>