Tables
documentation and examples for opt-in style of tables ( given their prevailing use in JavaScript plugins ) with Bootstrap .
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
, then extend with custom-made styles or our diverse included modifier classes .
Using the most basic mesa markup, here ’ second how .table -based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nest tables will be styled in the same manner as the parent.
Reading: Tables
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
class=
"table"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
Larry
the Bird
You can besides invert the colors—with light text on dark backgrounds—with .table-dark .
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
class=
"table table-dark"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
Larry
the Bird
Table head options
alike to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make
randomness appear fall or dark grey .
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
class=
"table"
>
class=
"thead-dark"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
Larry
the Bird
class=
“table”
>
class= “thead-light” >
scope= “col” > #
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
Larry
the Bird
Striped rows
Use .table-striped to add zebra-striping to any table quarrel within the
.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
class=
"table table-striped"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
Larry
the Bird
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
class=
"table table-striped table-dark"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
Larry
the Bird
Bordered table
Add .table-bordered for borders on all sides of the table and cells .
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
class=
"table table-bordered"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
colspan=
“2”
>
Larry the Bird
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
class=
"table table-bordered table-dark"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
colspan=
“2”
>
Larry the Bird
Read more: Lille OSC
Hoverable rows
Add .table-hover to enable a hover express on postpone rows within a
.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
class=
"table table-hover"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
colspan=
“2”
>
Larry the Bird
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
class=
"table table-hover table-dark"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
colspan=
“2”
>
Larry the Bird
Small table
Add .table-sm to make tables more pack by cutting cellular telephone padding in half .
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
class=
"table table-sm"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
colspan=
“2”
>
Larry the Bird
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
class=
"table table-sm table-dark"
>
scope=
"col"
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
colspan=
“2”
>
Larry the Bird
Contextual classes
Use contextual classes to color board rows or individual cells .
Class
Heading
Heading
Active
Cell
Cell
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
On rows
class=
"table-active"
>
... class=
“table-primary”
>
…
class=
“table-secondary”
>
…
class=
“table-success”
>
…
class=
“table-danger”
>
…
class=
“table-warning”
>
…
class=
“table-info”
>
…
class=
“table-light”
>
…
class=
“table-dark”
>
…
class=
“table-active”
>
…
class=
“table-primary”
>
…
class=
“table-secondary”
>
…
class=
“table-success”
>
…
class=
“table-danger”
>
…
class=
“table-warning”
>
…
class=
“table-info”
>
…
class=
“table-light”
>
…
class=
“table-dark”
>
…
regular postpone background variants are not available with the blue mesa, however, you may use text or background utilities to achieve similar styles .
#
Heading
Heading
1
Cell
Cell
2
Cell
Cell
3
Cell
Cell
4
Cell
Cell
5
Cell
Cell
6
Cell
Cell
7
Cell
Cell
8
Cell
Cell
9
Cell
Cell
On rows
class=
"bg-primary"
>
... class=
“bg-success”
>
…
class=
“bg-warning”
>
…
class=
“bg-danger”
>
…
class=
“bg-info”
>
…
class=
“bg-primary”
>
…
class=
“bg-success”
>
…
class=
“bg-warning”
>
…
class=
“bg-danger”
>
…
class=
“bg-info”
>
…
Conveying meaning to assistive technologies
Using color to add meaning only provides a ocular indication, which will not be conveyed to users of assistive technologies – such as screen readers. see that information denoted by the semblance is either obvious from the content itself ( e.g. the visible text ), or is included through option means, such as extra textbook hidden with the .sr-only classify .
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 .
note that since browsers do not presently support rate context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths ( which can occur under certain conditions on high-dpi devices, for exemplify ) by using values with higher preciseness for these comparisons .
Captions
A
functions like a head for a table. It helps users with screen readers to find a table and understand what it ’ sulfur about and decide if they want to read it .
List of users
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
class=
"table"
>
scope=
“col”
>
#
scope=
“col”
>
First
scope=
“col”
>
Last
scope=
“col”
>
Handle
scope=
“row”
>
1
Mark
Otto
@mdo
scope=
“row”
>
2
Jacob
Thornton
@fat
scope=
“row”
>
3
Larry
the Bird
Responsive tables
reactive tables allow tables to be scrolled horizontally with ease. Make any table reactive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a reactive table up to by using .table-responsive{-sm|-md|-lg|-xl} .
Vertical clipping/truncation
reactive tables make use of overflow-y: hidden, which clips off any message that goes beyond the bottom or top edges of the table. In detail, this can clip off dropdown menu and other third-party widgets .
Always responsive
Across every breakpoint, use .table-responsive for horizontally scroll tables .
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
class=
"table-responsive"
>
class=
"table"
>
...
Breakpoint specific
Use .table-responsive{-sm|-md|-lg|-xl} as needed to create reactive tables up to a particular breakpoint. From that breakpoint and up, the board will behave normally and not scroll horizontally .
#
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
#
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
#
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
#
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
class=
"table-responsive-sm"
>
class=
"table"
>
...
class=
“table-responsive-md”
>
class= “table” > …
class=
“table-responsive-lg”
>
class= “table” > …
class=
“table-responsive-xl”
>
class= “table” Read more: Real Sociedad > …