mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-04 16:24:22 +01:00
785 lines
20 KiB
Markdown
785 lines
20 KiB
Markdown
---
|
|
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" >}}
|
|
|
|
These classes can also be added to table variants:
|
|
|
|
{{< table class="table table-dark table-striped" >}}
|
|
|
|
{{< table class="table table-success table-striped" >}}
|
|
|
|
### 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 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>
|
|
|
|
{{< highlight 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>
|
|
{{< /highlight >}}
|
|
|
|
<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>
|
|
|
|
{{< highlight 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>
|
|
{{< /highlight >}}
|
|
|
|
## How do the variants and accented tables work?
|
|
|
|
For the accented tables ([striped rows](#striped-rows), [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 a gradient on the table cells with `background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));` to layer on top of any specified `background-color`. Since `--bs-table-accent-bg` is transparent by default, we have an invisible transparent linear gradient by default.
|
|
- When either `.table-striped`, `.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" >}}
|
|
|
|
## 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 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>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</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>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</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>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{{< highlight html >}}
|
|
<table class="table table-sm table-dark">
|
|
<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>
|
|
</table>
|
|
{{< /highlight >}}
|
|
|
|
## 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>
|
|
|
|
{{< highlight html >}}
|
|
<table class="table table-striped">
|
|
<thead>
|
|
...
|
|
</thead>
|
|
<tbody>
|
|
...
|
|
<tr>
|
|
<td colspan="4">
|
|
<table class="table mb-0">
|
|
...
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
...
|
|
</tbody>
|
|
</table>
|
|
{{< /highlight >}}
|
|
|
|
## 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>
|
|
|
|
{{< highlight html >}}
|
|
<table class="table">
|
|
<thead class="table-light">
|
|
...
|
|
</thead>
|
|
<tbody>
|
|
...
|
|
</tbody>
|
|
</table>
|
|
{{< /highlight >}}
|
|
|
|
<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>
|
|
|
|
{{< highlight html >}}
|
|
<table class="table">
|
|
<thead class="table-dark">
|
|
...
|
|
</thead>
|
|
<tbody>
|
|
...
|
|
</tbody>
|
|
</table>
|
|
{{< /highlight >}}
|
|
|
|
|
|
### 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>
|
|
|
|
{{< highlight html >}}
|
|
<table class="table">
|
|
<thead>
|
|
...
|
|
</thead>
|
|
<tbody>
|
|
...
|
|
</tbody>
|
|
<tfoot>
|
|
...
|
|
</tfoot>
|
|
</table>
|
|
{{< /highlight >}}
|
|
|
|
### 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.html" >}}
|
|
</table>
|
|
</div>
|
|
|
|
{{< highlight html >}}
|
|
<table class="table table-sm">
|
|
<caption>List of users</caption>
|
|
<thead>
|
|
...
|
|
</thead>
|
|
<tbody>
|
|
...
|
|
</tbody>
|
|
</table>
|
|
{{< /highlight >}}
|
|
|
|
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>
|
|
|
|
{{< highlight html >}}
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
...
|
|
</table>
|
|
</div>
|
|
{{< /highlight >}}
|
|
|
|
### 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 >}}
|
|
|
|
## Customizing in Sass
|
|
|
|
- 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-level` variable.
|
|
|
|
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
|