diff options
Diffstat (limited to 'site/content/docs/5.2/content/tables.md')
| -rw-r--r-- | site/content/docs/5.2/content/tables.md | 835 |
1 files changed, 835 insertions, 0 deletions
diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md new file mode 100644 index 0000000..577e3ef --- /dev/null +++ b/site/content/docs/5.2/content/tables.md @@ -0,0 +1,835 @@ +--- +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 +--- + +## Overview + +Due to the widespread use of `<table>` elements across third-party widgets like calendars and date pickers, Bootstrap's tables are **opt-in**. Add the base class `.table` to any `<table>`, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent. + +Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. + +{{< table class="table" simplified="false" >}} + +## Variants + +Use contextual classes to color tables, 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> + <th scope="row">Default</th> + <td>Cell</td> + <td>Cell</td> + </tr> + {{< table.inline >}} + {{- range (index $.Site.Data "theme-colors") }} + <tr class="table-{{ .name }}"> + <th scope="row">{{ .name | title }}</th> + <td>Cell</td> + <td>Cell</td> + </tr> + {{- end -}} + {{< /table.inline >}} + </tbody> + </table> +</div> + +{{< highlight html >}} +<!-- On tables -->{{< table.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<table class="table-{{ .name }}">...</table> +{{- end -}} +{{< /table.inline >}} + +<!-- On rows -->{{< table.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<tr class="table-{{ .name }}">...</tr> +{{- end -}} +{{< /table.inline >}} + +<!-- On cells (`td` or `th`) --> +<tr>{{< table.inline >}} +{{- range (index $.Site.Data "theme-colors") }} + <td class="table-{{ .name }}">...</td> +{{- end -}} +{{< /table.inline >}} +</tr> +{{< /highlight >}} + +{{< callout info >}} +{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< /callout >}} + +## Accented tables + +### Striped rows + +Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`. + +{{< table class="table table-striped" >}} + +### Striped columns + +Use `.table-striped-columns` to add zebra-striping to any table column. + +{{< table class="table table-striped-columns" >}} + +These classes can also be added to table variants: + +{{< table class="table table-dark table-striped" >}} + +{{< table class="table table-dark table-striped-columns" >}} + +{{< table class="table table-success table-striped" >}} + +{{< table class="table table-success table-striped-columns" >}} + +### Hoverable rows + +Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. + +{{< table class="table table-hover" >}} + +{{< table class="table table-dark table-hover" >}} + +These hoverable rows can also be combined with the striped rows variant: + +{{< table class="table table-striped table-hover" >}} + +### Active tables + +Highlight a table row or cell by adding a `.table-active` class. + +<div class="bd-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 class="table-active"> + <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" class="table-active">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> +</div> + +```html +<table class="table"> + <thead> + ... + </thead> + <tbody> + <tr class="table-active"> + ... + </tr> + <tr> + ... + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2" class="table-active">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +``` + +<div class="bd-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 class="table-active"> + <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" class="table-active">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> +</div> + +```html +<table class="table table-dark"> + <thead> + ... + </thead> + <tbody> + <tr class="table-active"> + ... + </tr> + <tr> + ... + </tr> + <tr> + <th scope="row">3</th> + <td colspan="2" class="table-active">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +``` + +## How do the variants and accented tables work? + +For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): + +- We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. +- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow. +- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. +- For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color. +- Text and border colors are generated the same way, and their colors are inherited by default. + +Behind the scenes it looks like this: + +{{< scss-docs name="table-variant" file="scss/mixins/_table-variants.scss" >}} + +## Table borders + +### Bordered tables + +Add `.table-bordered` for borders on all sides of the table and cells. + +{{< table class="table table-bordered" >}} + +[Border color utilities]({{< docsref "/utilities/borders#border-color" >}}) can be added to change colors: + +{{< table class="table table-bordered border-primary" >}} + +### Tables without borders + +Add `.table-borderless` for a table without borders. + +{{< table class="table table-borderless" >}} + +{{< table class="table table-dark table-borderless" >}} + +## Small tables + +Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half. + +{{< table class="table table-sm" >}} + +{{< table class="table table-dark table-sm" >}} + +## Table group dividers + +Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<tfoot>`—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time). + +{{< 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 class="table-group-divider"> + <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> +{{< /example >}} + +## Vertical alignment + +Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed. + +<div class="bd-example"> + <div class="table-responsive"> + <table class="table align-middle"> + <thead> + <tr> + <th scope="col" class="w-25">Heading 1</th> + <th scope="col" class="w-25">Heading 2</th> + <th scope="col" class="w-25">Heading 3</th> + <th scope="col" class="w-25">Heading 4</th> + </tr> + </thead> + <tbody> + <tr> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> + </tr> + <tr class="align-bottom"> + <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> + <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> + <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> + <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> + </tr> + <tr> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td>This cell inherits <code>vertical-align: middle;</code> from the table</td> + <td class="align-top">This cell is aligned to the top.</td> + <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td> + </tr> + </tbody> + </table> + </div> +</div> + +```html +<div class="table-responsive"> + <table class="table align-middle"> + <thead> + <tr> + ... + </tr> + </thead> + <tbody> + <tr> + ... + </tr> + <tr class="align-bottom"> + ... + </tr> + <tr> + <td>...</td> + <td>...</td> + <td class="align-top">This cell is aligned to the top.</td> + <td>...</td> + </tr> + </tbody> + </table> +</div> +``` + +## Nesting + +Border styles, active styles, and table variants are not inherited by nested tables. + +<div class="bd-example"> +<table class="table table-striped 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> + <td colspan="4"> + <table class="table mb-0"> + <thead> + <tr> + <th scope="col">Header</th> + <th scope="col">Header</th> + <th scope="col">Header</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">A</th> + <td>First</td> + <td>Last</td> + </tr> + <tr> + <th scope="row">B</th> + <td>First</td> + <td>Last</td> + </tr> + <tr> + <th scope="row">C</th> + <td>First</td> + <td>Last</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> +</table> +</div> + +```html +<table class="table table-striped"> + <thead> + ... + </thead> + <tbody> + ... + <tr> + <td colspan="4"> + <table class="table mb-0"> + ... + </table> + </td> + </tr> + ... + </tbody> +</table> +``` + +## How nesting works + +To prevent _any_ styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables. + +Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended. + +## Anatomy + +### Table head + +Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray. + +<div class="bd-example"> +<table class="table"> + <thead class="table-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> +</div> + +```html +<table class="table"> + <thead class="table-light"> + ... + </thead> + <tbody> + ... + </tbody> +</table> +``` + +<div class="bd-example"> +<table class="table"> + <thead class="table-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> +</div> + +```html +<table class="table"> + <thead class="table-dark"> + ... + </thead> + <tbody> + ... + </tbody> +</table> +``` + +### Table foot + +<div class="bd-example"> +<table class="table"> + <thead class="table-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> + <tfoot> + <tr> + <td>Footer</td> + <td>Footer</td> + <td>Footer</td> + <td>Footer</td> + </tr> + </tfoot> +</table> +</div> + +```html +<table class="table"> + <thead> + ... + </thead> + <tbody> + ... + </tbody> + <tfoot> + ... + </tfoot> +</table> +``` + +### 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. + +<div class="bd-example"> + <table class="table"> + <caption>List of users</caption> + {{< partial "table-content" >}} + </table> +</div> + +```html +<table class="table table-sm"> + <caption>List of users</caption> + <thead> + ... + </thead> + <tbody> + ... + </tbody> +</table> +``` + +You can also put the `<caption>` on the top of the table with `.caption-top`. + +{{< example >}} +<table class="table caption-top"> + <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> +{{< /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|-xxl}`. + +{{< 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. +{{< /callout >}} + +### 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> + +```html +<div class="table-responsive"> + <table class="table"> + ... + </table> +</div> +``` + +### Breakpoint specific + +Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` 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.** + +{{< tables.inline >}} +{{ range $.Site.Data.breakpoints }} +{{ if not (eq . "xs") }} +<div class="bd-example"> + <div class="table-responsive{{ .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> +{{ end -}} +{{- end -}} +{{< /tables.inline >}} + +{{< highlight html >}} +{{< tables.inline >}} +{{- range $.Site.Data.breakpoints -}} +{{- if not (eq . "xs") }} +<div class="table-responsive{{ .abbr }}"> + <table class="table"> + ... + </table> +</div> +{{ end -}} +{{- end -}} +{{< /tables.inline >}} +{{< /highlight >}} + +## Sass + +### Variables + +{{< scss-docs name="table-variables" file="scss/_variables.scss" >}} + +### Loop + +{{< scss-docs name="table-loop" file="scss/_variables.scss" >}} + +### Customizing + +- The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants. +- Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-scale` variable. |