mirror of
https://github.com/twbs/bootstrap.git
synced 2025-11-29 00:05:04 -05:00
821 lines
21 KiB
Plaintext
821 lines
21 KiB
Plaintext
---
|
||
title: Tables
|
||
description: Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
|
||
toc: true
|
||
---
|
||
|
||
import { getData } from '@libs/data'
|
||
|
||
## 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.
|
||
|
||
<Callout>
|
||
**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won’t see color mode adaptive styling until v6.
|
||
</Callout>
|
||
|
||
<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>
|
||
{getData('theme-colors').map((themeColor) => {
|
||
return (
|
||
<tr class={`table-${themeColor.name}`}>
|
||
<th scope="row">{themeColor.title}</th>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<Code code={[
|
||
`<!-- On tables -->`,
|
||
...getData('theme-colors').map((themeColor) => `<table class="table table-${themeColor.name}">...</table>`),
|
||
`
|
||
<!-- On rows -->`,
|
||
...getData('theme-colors').map((themeColor) => `<tr class="table-${themeColor.name}">...</tr>`),
|
||
`
|
||
<!-- On cells (\`td\` or \`th\`) -->
|
||
<tr>`,
|
||
...getData('theme-colors').map((themeColor) => ` <td class="table-${themeColor.name}">...</td>`),
|
||
`</tr>`
|
||
]} lang="html" />
|
||
|
||
<Callout name="warning-color-assistive-technologies" />
|
||
|
||
## 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.
|
||
|
||
<Example showMarkup={false} code={`
|
||
<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>John</td>
|
||
<td>Doe</td>
|
||
<td class="table-active">@social</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
`} />
|
||
|
||
```html
|
||
<table class="table">
|
||
<thead>
|
||
...
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table-active">
|
||
...
|
||
</tr>
|
||
<tr>
|
||
...
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">3</th>
|
||
<td>John</td>
|
||
<td>Doe</td>
|
||
<td class="table-active">@social</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
```
|
||
|
||
<Example showMarkup={false} code={`
|
||
<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>John</td>
|
||
<td>Doe</td>
|
||
<td class="table-active">@social</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
`} />
|
||
|
||
```html
|
||
<table class="table table-dark">
|
||
<thead>
|
||
...
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table-active">
|
||
...
|
||
</tr>
|
||
<tr>
|
||
...
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">3</th>
|
||
<td>John</td>
|
||
<td>Doe</td>
|
||
<td class="table-active">@social</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-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` 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, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
|
||
- 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:
|
||
|
||
<ScssDocs 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 code={`<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>John</td>
|
||
<td>Doe</td>
|
||
<td>@social</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>`} />
|
||
|
||
## 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.
|
||
|
||
<Example showMarkup={false} code={`
|
||
<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>
|
||
`} />
|
||
|
||
```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.
|
||
|
||
<Example showMarkup={false} code={`
|
||
<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>John</td>
|
||
<td>Doe</td>
|
||
<td>@social</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
`} />
|
||
|
||
```html
|
||
<table class="table table-striped table-bordered">
|
||
<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.
|
||
|
||
<Example showMarkup={false} code={`
|
||
<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>John</td>
|
||
<td>Doe</td>
|
||
<td>@social</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
`} />
|
||
|
||
```html
|
||
<table class="table">
|
||
<thead class="table-light">
|
||
...
|
||
</thead>
|
||
<tbody>
|
||
...
|
||
</tbody>
|
||
</table>
|
||
```
|
||
|
||
<Example showMarkup={false} code={`
|
||
<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>John</td>
|
||
<td>Doe</td>
|
||
<td>@social</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
`} />
|
||
|
||
```html
|
||
<table class="table">
|
||
<thead class="table-dark">
|
||
...
|
||
</thead>
|
||
<tbody>
|
||
...
|
||
</tbody>
|
||
</table>
|
||
```
|
||
|
||
### Table foot
|
||
|
||
<Example showMarkup={false} code={`
|
||
<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>John</td>
|
||
<td>Doe</td>
|
||
<td>@social</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td>Footer</td>
|
||
<td>Footer</td>
|
||
<td>Footer</td>
|
||
<td>Footer</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
`} />
|
||
|
||
```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>
|
||
<TableContent />
|
||
</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 code={`<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>John</td>
|
||
<td>Doe</td>
|
||
<td>@social</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>`} />
|
||
|
||
## 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 type="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.
|
||
|
||
<Example showMarkup={false} code={`
|
||
<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>
|
||
`} />
|
||
|
||
```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.**
|
||
|
||
{getData('breakpoints').map((breakpoint) => {
|
||
return (
|
||
<div class="bd-example">
|
||
<div class={`table-responsive${breakpoint.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>
|
||
)
|
||
})}
|
||
|
||
<Code code={getData('breakpoints').map((breakpoint) => `<div class="table-responsive${breakpoint.abbr}">
|
||
<table class="table">
|
||
...
|
||
</table>
|
||
</div>
|
||
`)} lang="html" />
|
||
|
||
## CSS
|
||
|
||
### Sass variables
|
||
|
||
<ScssDocs name="table-variables" file="scss/_variables.scss" />
|
||
|
||
### Sass loops
|
||
|
||
<ScssDocs 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.
|