diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.5/content/tables.md')
| -rw-r--r-- | vendor/twbs/bootstrap/site/docs/4.5/content/tables.md | 831 |
1 files changed, 831 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md b/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md new file mode 100644 index 000000000..8799d47f2 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md @@ -0,0 +1,831 @@ +--- +layout: docs +title: Tables +description: Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. +group: content +toc: true +--- + +## Examples + +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>`, then extend with custom styles or our various included modifier classes. + +Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent. + +{% capture example %} +<table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +You can also invert the colors—with light text on dark backgrounds—with `.table-dark`. + +{% capture example %} +<table class="table table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +## Table head options + +Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray. + +{% capture example %} +<table class="table"> + <thead class="thead-dark"> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> + +<table class="table"> + <thead class="thead-light"> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +## Striped rows + +Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`. + +{% capture example %} +<table class="table table-striped"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<table class="table table-striped table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +## Bordered table + +Add `.table-bordered` for borders on all sides of the table and cells. + +{% capture example %} +<table class="table table-bordered"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<table class="table table-bordered table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +## Borderless table + +Add `.table-borderless` for a table without borders. + +{% capture example %} +<table class="table table-borderless"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +`.table-borderless` can also be used on dark tables. + +{% capture example %} +<table class="table table-borderless table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +## Hoverable rows + +Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. + +{% capture example %} +<table class="table table-hover"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<table class="table table-hover table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +## Small table + +Add `.table-sm` to make tables more compact by cutting cell padding in half. + +{% capture example %} +<table class="table table-sm"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +<table class="table table-sm table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +## Contextual classes + +Use contextual classes to color table rows or individual cells. + +<div class="bd-example"> + <table class="table"> + <thead> + <tr> + <th scope="col">Class</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr class="table-active"> + <th scope="row">Active</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">Default</th> + <td>Cell</td> + <td>Cell</td> + </tr> + + {% for color in site.data.theme-colors %} + <tr class="table-{{ color.name }}"> + <th scope="row">{{ color.name | capitalize }}</th> + <td>Cell</td> + <td>Cell</td> + </tr>{% endfor %} + </tbody> + </table> +</div> + +{% highlight html %} +<!-- On rows --> +<tr class="table-active">...</tr> +{% for color in site.data.theme-colors %} +<tr class="table-{{ color.name }}">...</tr>{% endfor %} + +<!-- On cells (`td` or `th`) --> +<tr> + <td class="table-active">...</td> + {% for color in site.data.theme-colors %} + <td class="table-{{ color.name }}">...</td>{% endfor %} +</tr> +{% endhighlight %} + +Regular table background variants are not available with the dark table, however, you may use [text or background utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) to achieve similar styles. + +<div class="bd-example"> + <table class="table table-dark"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr class="bg-primary"> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-success"> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">4</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-info"> + <th scope="row">5</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">6</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-warning"> + <th scope="row">7</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">8</th> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr class="bg-danger"> + <th scope="row">9</th> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> + +{% highlight html %} +<!-- On rows --> +<tr class="bg-primary">...</tr> +<tr class="bg-success">...</tr> +<tr class="bg-warning">...</tr> +<tr class="bg-danger">...</tr> +<tr class="bg-info">...</tr> + +<!-- On cells (`td` or `th`) --> +<tr> + <td class="bg-primary">...</td> + <td class="bg-success">...</td> + <td class="bg-warning">...</td> + <td class="bg-danger">...</td> + <td class="bg-info">...</td> +</tr> +{% endhighlight %} + +{% include callout-warning-color-assistive-technologies.md %} + +Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-md|-lg|-xl}`, making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively. + +{% include callout-info-mediaqueries-breakpoints.md %} + +## Captions + +A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. + +{% capture example %} +<table class="table"> + <caption>List of users</caption> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</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> +{% endcapture %} +{% include example.html content=example %} + +## Responsive tables + +Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`. + +{% capture callout %} +##### 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. +{% endcapture %} +{% include callout.html content=callout type="warning" %} + +### Always responsive + +Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. + +<div class="bd-example"> + <div class="table-responsive"> + <table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> + </div> +</div> + +{% highlight html %} +<div class="table-responsive"> + <table class="table"> + ... + </table> +</div> +{% endhighlight %} + +### Breakpoint specific + +Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. + +**These tables may appear broken until their responsive styles apply at specific viewport widths.** + +{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %} +<div class="bd-example"> +<div class="table-responsive{{ bp.abbr }}"> + <table class="table"> + <thead> + <tr> + <th scope="col">#</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">1</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + <td>Cell</td> + </tr> + </tbody> + </table> +</div> +</div> +{% highlight html %} +<div class="table-responsive{{ bp.abbr }}"> + <table class="table"> + ... + </table> +</div> +{% endhighlight %} +{% endunless %}{% endfor %} |