Theme Settings
Theme

Header

Sidebar

Left Sidebar Bg Image

Scheme

Layout

Table Designs

Fonts

Input

Buttons Styles
Buy Now




Basic Table

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 Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot 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 Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot 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 Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot admin
Cancel
Use the modifier class .table-light to make thead appear light.
User Project Name Users Status Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot 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 Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot 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 Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot 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 Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot admin
Cancel
Table Hoverable

Add .table-hover to enable a hover state on table rows.

User Project Name Users Status Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot admin
Cancel
Small Table

Add .table-sm class with .table to display small size table.

User Project Name Users Status Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot admin
Cancel
Contextual classes

Use contextual classes to color table rows or individual cells.

User Project Name Users Status Aection
Smit Gani
Skot admin
Active
Parul Patel
Ruby admin
Pending
Mitesh Tank
Dev admin
Completed
Jully Desai
Master admin
Pending
Paresh Rani
Robot 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
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
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
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
Agastya Admin ©