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, 0 insertions, 831 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 deleted file mode 100644 index 8799d47f2..000000000 --- a/vendor/twbs/bootstrap/site/docs/4.5/content/tables.md +++ /dev/null @@ -1,831 +0,0 @@ ---- -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 %} |