diff options
Diffstat (limited to 'docs/components/tables.md')
| -rw-r--r-- | docs/components/tables.md | 602 |
1 files changed, 602 insertions, 0 deletions
diff --git a/docs/components/tables.md b/docs/components/tables.md new file mode 100644 index 000000000..d2f9acece --- /dev/null +++ b/docs/components/tables.md @@ -0,0 +1,602 @@ +--- +layout: page +title: Tables +--- + +Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`. + +## Basic example + +{% example html %} +<table class="table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + +## Inverse table + +{% example html %} +<table class="table table-inverse"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + +## Table head options + +Use one of two modifier classes to make `<thead>`s appear light or dark gray. + +{% example html %} +<table class="table"> + <thead class="thead-inverse"> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + <thead class="thead-default"> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + +## Striped rows + +Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`. + +{% example html %} +<table class="table table-striped"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + +## Bordered table + +Add `.table-bordered` for borders on all sides of the table and cells. + +{% example html %} +<table class="table table-bordered"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Mark</td> + <td>Otto</td> + <td>@TwBootstrap</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">4</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + +## Hoverable rows + +Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. + +{% example html %} +<table class="table table-hover"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + +## Small table + +Add `.table-sm` to make tables more compact by cutting cell padding in half. + +{% example html %} +<table class="table table-sm"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +{% endexample %} + +## Contextual classes + +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-xs-1"> + <col class="col-xs-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> + +<div class="bd-example"> + <table class="table"> + <thead> + <tr> + <th>#</th> + <th>Column heading</th> + <th>Column heading</th> + <th>Column heading</th> + </tr> + </thead> + <tbody> + <tr class="table-active"> + <th scope="row">1</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="table-success"> + <th scope="row">3</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">4</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="table-info"> + <th scope="row">5</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">6</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="table-warning"> + <th scope="row">7</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr> + <th scope="row">8</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + <tr class="table-danger"> + <th scope="row">9</th> + <td>Column content</td> + <td>Column content</td> + <td>Column content</td> + </tr> + </tbody> + </table> +</div> + +{% highlight html %} +<!-- On rows --> +<tr class="table-active">...</tr> +<tr class="table-success">...</tr> +<tr class="table-warning">...</tr> +<tr class="table-danger">...</tr> +<tr class="table-info">...</tr> + +<!-- On cells (`td` or `th`) --> +<tr> + <td class="table-active">...</td> + <td class="table-success">...</td> + <td class="table-warning">...</td> + <td class="table-danger">...</td> + <td class="table-info">...</td> +</tr> +{% endhighlight %} + +## 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. + +{% callout warning %} +#### Vertical clipping/truncation + +Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets. +{% endcallout %} + +{% callout warning %} +#### Firefox and fieldsets + +Firefox has some awkward fieldset styling involving `width` that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we **don't** provide in Bootstrap: + +{% highlight css %} +@-moz-document url-prefix() { + fieldset { display: table-cell; } +} +{% endhighlight %} + +For more information, read [this Stack Overflow answer](http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685). +{% 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> + +{% highlight html %} +<div class="table-responsive"> + <table class="table"> + ... + </table> +</div> +{% endhighlight %} + + +### Reflow + +{% example html %} +<table class="table table-reflow"> + <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> +{% endexample %} |