Overview #
UX4G's tables are opt-in due to the widespread use of
<table> components across third-party widgets like calendars and date
pickers. Any <table> can be extended with optional modifier classes
or unique styles after adding the base class.table. Since none of the table styles in
UX4G are inherited, any nested tables can have their own styling independent of the
parent table.
Here's how, using the most fundamental table markup.UX4G's table-based
tables appear.
< 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 colspan = " 2 " > Larry the Bird </ td >
< td > @twitter </ td >
</ tr >
</ tbody >
</ table >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Primary table #
These classes can also be added to primary table
<div class="code_bg p-3">
<div class="bg-white p-3 rounded table-responsive">
<table class="table table-striped-primary table-hover-primary table-border-radius table-bordered-primary">
<thead>
<tr class="bg-primary-900 text-white">
<th>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</th>
<th>Name</th>
<th>Role</th>
<th>Company</th>
<th>Location</th>
<th class="bottom-right-0">Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</td>
<td>Buzz</td>
<td>Owner</td>
<td>Your Friend Buzz</td>
<td>Australia</td>
<td>
<div>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary-100"></i>
<i class="fa fa-star text-primary-100"></i>
<i class="fa fa-star text-primary-100"></i>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</td>
<td>Dustin</td>
<td>Admin</td>
<td>Story Inc</td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="rounded-circle avatars avatars-sm d-flex align-items-center justify-content-center position-relative">
<img class="rounded-circle" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
</div>
<small>Hong Kong</small>
</div>
</td>
<td>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary-100"></i>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</td>
<td>Mark</td>
<td>User</td>
<td>Mixpanel</td>
<td>
United States of America
</td>
<td>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
</div>
</td>
<td>Cynthia</td>
<td>Visitor</td>
<td>Shopify</td>
<td>
Canada
</td>
<td>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
<i class="fa fa-star text-primary"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
RESULT
Variants #
Color-coding to add meaning just gives a visual cue, which users of assistive
technologies like screen readers won't be able to understand. Make sure the information
the colour designates is either evident from the content itself (such as the visible
text) or is included in another way, such as by hiding additional text using the
.visually-hidden class.
Class
Heading
Heading
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
< table class = " table-primary " > ... </ table > < table class = " table-secondary " > ... </ table > < table class = " table-success " > ... </ table > < table class = " table-danger " > ... </ table > < table class = " table-warning " > ... </ table > < table class = " table-info " > ... </ table > < table class = " table-light " > ... </ table > < table class = " table-dark " > ... </ table > < tr class = " table-primary " > ... </ tr > < tr class = " table-secondary " > ... </ tr > < tr class = " table-success " > ... </ tr > < tr class = " table-danger " > ... </ tr > < tr class = " table-warning " > ... </ tr > < tr class = " table-info " > ... </ tr > < tr class = " table-light " > ... </ tr > < tr class = " table-dark " > ... </ tr > < tr > < td class = " table-primary " > ... </ td > < td class = " table-secondary " > ... </ td > < td class = " table-success " > ... </ td > < td class = " table-danger " > ... </ td > < td class = " table-warning " > ... </ td > < td class = " table-info " > ... </ td > < td class = " table-light " > ... </ td > < td class = " table-dark " > ... </ td > </ tr >
CONVEYING
MEANING TO ASSISTIVE TECHNOLOGIES
Using color to add meaning only provides a visual indication, which will
not be conveyed to users of assistive technologies – such as screen
readers. Ensure that information denoted by the color is either obvious
from the content itself (e.g. the visible text), or is included through
alternative means, such as additional text hidden with the
.visually-hidden class.
Accented tables #
Striped rows #
Use .table-striped to add zebra-striping to
any table row within the
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Striped columns #
Use .table-striped-columns to add
zebra-striping to any table column.
< table class = " table table-striped-columns " >
< 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
These classes can also be added to table variants:
< table class = " table table-dark 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 colspan = " 2 " > Larry the Bird </ td >
< td > @twitter </ td >
</ tr >
</ tbody >
</ table >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
< table class = " table table-dark table-striped-columns " >
< 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
< table class = " table table-success 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 colspan = " 2 " > Larry the Bird </ td >
< td > @twitter </ td >
</ tr >
</ tbody >
</ table >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
< table class = " table table-success table-striped-columns " >
< 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Hoverable rows #
Add .table-hover to enable a hover state on
table rows within a tbody.
< 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
< table class = " table table-dark 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
These hoverable rows can also be combined with the striped rows variant:
< table class = " table table-striped 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Active tables #
Highlight a table row or cell by adding a .table-active class.
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
<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>
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
< 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? #
There are several methods to ensure that these effects appeared on all of the table
variations for the accented tables (striped rows, striped columns,
hoverable rows, and active tables):
Starting off, use the custom property --bs-table-bg to change a table
cell's background colour. The custom attribute is then set in all table variations
to colourize the table cells. In this approach, if semi-transparent colours are
chosen for table backdrops, avoid any issues.
Then, to layer on top of any supplied background-color, place an inset box shadow on
the table cells with the following syntax: box-shadow: inset
0 0 0 9999px var (--bs-table-accent-bg); The colour will be monotone
because there is a utilisation of wide spread and didn't apply any blur. It doesn't
have a default box-shadow because --bs-table-accent-bg is unset by
default.
The --bs-table-accent-bg property is used to colourize the background when the
.table-striped, .table-striped-columns,
.table-hover, or .table-active classes are added.
We create a --bs-table-accent-bg colour for each table version based on the colour
that has the highest contrast. For instance, .table-primary has a
darker accent colour than .table-dark, which has a lighter accent
colour.
The same algorithm is used to produce both text and border colours, and
by default, those colours are inherited.
@mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
$table-border-color: mix($color, $background, percentage($table-border-factor));
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
Table borders #
Bordered tables #
Add .table-bordered for borders on all
sides of the table and cells.
< 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Border color utilities can be added to
change colors:
< table class = " table table-bordered border-primary " >
< 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Tables without borders #
Add .table-borderless for a table without
borders.
< 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
< 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 >
RESULT
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Small tables #
Add .table-sm to make any .table more compact by cutting all
cell
padding in half.
< 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 >
Result
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
< table class = " table table-dark 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 >
Result
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table group dividers #
Add a thicker border, darker between table groups—border-top-color
(which we don't currently provide a utility class for at this time).
< 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 >
Result
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Vertical alignment #
Table cells are always positioned at the bottom and vertically aligned. Table cells in
and by default have top alignment, which they inherit from. To realign when necessary,
use the
vertical align
classes.
Heading 1
Heading 2
Heading 3
Heading 4
This cell inherits vertical-align: middle;
from the table
This cell inherits vertical-align: middle;
from the table
This cell inherits vertical-align: middle;
from the table
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.
This cell inherits vertical-align: bottom;
from the table row
This cell inherits vertical-align: bottom;
from the table row
This cell inherits vertical-align: bottom;
from the table row
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.
This cell inherits vertical-align: middle;
from the table
This cell inherits vertical-align: middle;
from the table
This cell is aligned to the top.
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.
< 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.
#
First
Last
Handle
1
Mark
Otto
@mdo
Header
Header
Header
A
First
Last
B
First
Last
C
First
Last
3
Larry
the Bird
@twitter
< 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 #
We employ the child combinator (>) selector in our CSS to stop styles from
leaking to nested tables. In order to target every td and th in the thead, tbody, and
tfoot, we need this selector, which would otherwise appear quite long. As a result, we
employ the peculiar-looking.All tds and ths of the.table are targeted by the
table >:not(caption) > * > * selector, but none of the possible nested
tables are.
Remember that our selectors will function as planned if you add tr>s as direct children
of a table since those <tr> will automatically be wrapped in a
<tbody>.
Anatomy #
Table head #
Similar to tables and dark tables, use the modifier classes .table-light or
.table-dark to make
< table class = " table " > < thead class = " table-light " > ... </ thead > < tbody > ... </ tbody > </ table >
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
< table class = " table " > < thead class = " table-dark " > ... </ thead > < tbody > ... </ tbody > </ table >
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Table foot
< table class = " table " > < thead > ... </ thead > < tbody > ... </ tbody > < tfoot > ... </ tfoot > </ table >
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Footer
Footer
Footer
Footer
Captions #
A
< table class = " table table-sm " > < caption > List of users </ caption > < thead > ... </ thead > < tbody > ... </ tbody > </ table >
You can also put the
< 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 >
Result
List of users
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Responsive tables #
Tables that are responsive can easily be scrolled horizontally. Wrapping a
.table in .table-responsive will make any table responsive
across all viewports. Alternately, you may specify a maximum breakpoint by using the
.table-responsive {-sm|-md|-lg|-xl|-xxl} keyword.
CAUTION
Vertical clipping/truncation #
Overflow-y: hidden, which clips off material that extends past the
bottom or top margins of the table, is a technique used in responsive tables. This
can specifically clip off third-party widgets like dropdown menus.
Always responsive #
Across every breakpoint, use .table-responsive for horizontally scrolling
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
< div class = " table-responsive " > < table class = " table " > ... </ table > </ div >
Breakpoint specific #
To generate responsive tables up to a specific breakpoint, use
.table-responsive{-sm|-md|-lg|-xl|-xxl}. The table will act appropriately
after that breakpoint and won't scroll horizontally.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>
<div class="table-responsive-xxl">
<table class="table">
...
</table>
</div>
Result
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
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.
Government of
India
