Table Basic
Using the most basic table Leanne Grahamup, here’s how .table-based tables look in
Bootstrap. You can use any example of below table for your table and it can be use
with any type of bootstrap tables.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Dark Table
You can also invert the colors—with light text on dark backgrounds—with .table-dark
class with .table class.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table head options
Similar to tables and dark tables, use the modifier classes .table-dark to make
thead appear dark.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Use the modifier class .table-light to make thead appear
light.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table Striped
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.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table Bordered
Add .table-bordered for borders on all sides of the table and cells. For Inverse
Dark Table, add .table-dark along with .table-bordered.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table Borderless
Add .table-borderless for a table without borders. It can also be used on dark
tables.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Table Hoverable
Add .table-hover to enable a hover state on table rows.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Small Table
Add .table-sm class with .table to display small size table.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Contextual classes
Use contextual classes to color table rows or individual cells.
| User |
Project Name |
Users |
Status |
Actions |
John Smith
|
Xtreme admin |
|
Active
|
|
Robert Smith
|
Adminpro admin |
|
Pending
|
|
Maria Hernandez
|
Monster admin |
|
Completed
|
|
Maria Rodriguez
|
Materialpro admin |
|
Pending
|
|
Mary Deo
|
Elegant admin |
|
Cancel
|
|
Responsive table
| # |
Heading 1 |
Heading 2 |
Heading 3 |
Heading 4 |
Heading 5 |
Heading 6 |
Heading 7 |
Heading 8 |
Heading 9 |
Heading 10 |
Heading 11 |
Heading 12 |
Heading 13 |
| 1 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 2 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 3 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
| 4 |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |
Table cell |