diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/content/tables.md | 274 |
1 files changed, 133 insertions, 141 deletions
diff --git a/docs/content/tables.md b/docs/content/tables.md index b927f35d5..c1661e532 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -442,52 +442,50 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. Use contextual classes to color table rows or individual cells. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <colgroup> - <col class="col-1"> - <col class="col-7"> - </colgroup> - <thead> - <tr> - <th>Class</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"> - <code>.table-active</code> - </th> - <td>Applies the hover color to a particular row or cell</td> - </tr> - <tr> - <th scope="row"> - <code>.table-success</code> - </th> - <td>Indicates a successful or positive action</td> - </tr> - <tr> - <th scope="row"> - <code>.table-info</code> - </th> - <td>Indicates a neutral informative change or action</td> - </tr> - <tr> - <th scope="row"> - <code>.table-warning</code> - </th> - <td>Indicates a warning that might need attention</td> - </tr> - <tr> - <th scope="row"> - <code>.table-danger</code> - </th> - <td>Indicates a dangerous or potentially negative action</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <colgroup> + <col class="col-1"> + <col class="col-7"> + </colgroup> + <thead> + <tr> + <th>Class</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"> + <code>.table-active</code> + </th> + <td>Applies the hover color to a particular row or cell</td> + </tr> + <tr> + <th scope="row"> + <code>.table-success</code> + </th> + <td>Indicates a successful or positive action</td> + </tr> + <tr> + <th scope="row"> + <code>.table-info</code> + </th> + <td>Indicates a neutral informative change or action</td> + </tr> + <tr> + <th scope="row"> + <code>.table-warning</code> + </th> + <td>Indicates a warning that might need attention</td> + </tr> + <tr> + <th scope="row"> + <code>.table-danger</code> + </th> + <td>Indicates a dangerous or potentially negative action</td> + </tr> + </tbody> +</table> <div class="bd-example"> <table class="table"> @@ -670,7 +668,7 @@ Regular table background variants are not available with the inverse table, howe ## Responsive tables -Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. +Create responsive tables by adding `.table-responsive` to any `.table` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. {% callout warning %} #### Vertical clipping/truncation @@ -693,103 +691,97 @@ For more information, read [this Stack Overflow answer](https://stackoverflow.co {% endcallout %} <div class="bd-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> - <th scope="row">1</th> - <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> - <th scope="row">2</th> - <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> - <th scope="row">3</th> - <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> - - <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> - <th scope="row">1</th> - <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> - <th scope="row">2</th> - <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> - <th scope="row">3</th> - <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> -</div> + <table class="table table-responsive"> + <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> + <th scope="row">1</th> + <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> + <th scope="row">2</th> + <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> + <th scope="row">3</th> + <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> -{% highlight html %} -<div class="table-responsive"> - <table class="table"> - ... + <table class="table table-bordered table-responsive"> + <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> + <th scope="row">1</th> + <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> + <th scope="row">2</th> + <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> + <th scope="row">3</th> + <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> + +{% highlight html %} +<table class="table table-responsive""> + ... +</table> {% endhighlight %} |