Basic Table with Border Bottom Color
Use table class to any table, and
border-bottom-* class for Border bottom color
.
| Id | First Name | Last Name | Username | Designation | Company | Language | Country |
|---|---|---|---|---|---|---|---|
| 1 |  }}) Ram Jacob |
Wolfe | RamJacob@twitter | Developer | Apple Inc. | Php | IND |
| 2 |  }}) John Deo |
Gummer | JohnDeo@twitter | Designer | Hewlett packard | Html | US |
| 3 |  }}) Elana John |
Cazale | ElanaJohn@twitter | Designer | Microsoft | Pug | UK |
| 4 |  }}) Meryl Streep |
Roberts | MerylStreep@twitter | Developer | Tata Ltd. | React | IDN |
| 5 |  }}) Emma Stone |
Stone | EmmaStone@twitter | Developer | Wipro Ltd. | Vue | IRN |
| 6 |  }}) Eliana Jons |
Jons | ElianaJons@twitter | Developer | Info Ltd. | Vue | IRN |
Bootstrap Table With Variants
Use table class to any table, and
border-bottom-* class for Border bottom color
.
Inverse Table
Use table-inverse class inside table
element.
Hoverable Rows with Horizontal Border
Hoverable row use a class table-hover and
for horizontal border use a class table-border-horizontal , solid
border use a class border-solid, table classes.
Inverse Table Background
Use
bg-info, bg-success, bg-warning and bg-danger classes with light
text on dark backgrounds inside table element.
To set the light background
color use bg-[color] class where [color] is the
value of your selected color from stack color palette. So for teal color
background class will be bg-teal.
Caption
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.
Table Head Options
Similar to tables , use the modifier
classes table-[color] to make thead appear in any
color.
Striped Row with Inverse Table
Use table-striped to add zebra-striping to
any table row within the . This styling doesn't work in IE8 and
below as :nth-child CSS selector isn't supported.
Striped Columns
Use table-striped-columns to add
zebra-striping to any table column.
Active Tables
Highlight a table row or cell by adding a
table-active class.
Table Borders
Add table-bordered for borders on all sides
of the table and cells.
Table Without Borders
Add table-borderless for a table without
borders.
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 classes to re-align where needed.
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
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.
Table Foot
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 tds and ths in the thead, tbody, and tfoot, our selector would look pretty long without it.
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).
Breakpoint Specific
Use table-responsive"❴-sm|-md|-lg|-xl|-xxl❵"
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.
Responsive Tables with Light Background
A table-responsive , light-card inside table
element.
Sizing Tables
Example of extra large table, Add table-xl
class to the table , Large table Add table-lg ,
Default table Add table-de , Small table Add
table-sm , Extra Small table Add table-xs to create a
table.
Custom Table Color with Hover and Stripped
Use class
table-hover, table-striped table-*table-info , table-success , table-success , table-info
, table-danger , table-primary , table-secondary , table-light , table-active
inside table element.
Dashed Border
Use table-dashed class for dash border for
dotted border use class table-dotted for double border use
class table-double.