Default Table

Use table class to show bootstrap-based default table.

ID Customer Date Invoice Action
#VZ2110 Bobby Davis October 15, 2021 $2,300 View More
#VZ2109 Christopher Neal October 7, 2021 $5,500 View More
#VZ2108 Monkey Karry October 5, 2021 $2,420 View More
#VZ2107 James White October 2, 2021 $7,452 View More

Striped Rows

Use table-striped class to add zebra-striping to any table row within the <tbody>.

ID Customer Date Invoice Action
01 Bobby Davis Nov 14, 2021 $2,410 Confirmed
02 Christopher Neal Nov 21, 2021 $1,450 Waiting
03 Monkey Karry Nov 24, 2021 $3,500 Confirmed
04 Aaron James Nov 25, 2021 $6,875 Cancelled

Striped columns

Use .table-striped-columns to add zebra-striping to any table column.

ID Name Date Total Status Action
#VL2110 William Elmore 07 Oct, 2021 $24.05 Paid
#VL2109 Georgie Winters 07 Oct, 2021 $26.15 Paid
#VL2108 Whitney Meier 06 Oct, 2021 $21.25 Refund
#VL2107 Justin Maier 05 Oct, 2021 $25.03 Paid

Tables Colors

Use table-dark class to set dark color table body and table-success class to set success color table body respectively. use table- class with different color variation to set required table body color.

ID Customer Date Invoice
01 Bobby Davis Nov 14, 2021 $2,410
02 Christopher Neal Nov 21, 2021 $1,450
03 Monkey Karry Nov 24, 2021 $3,500
04 Aaron James Nov 25, 2021 $6,875
ID Invoice Amount Date Status Action
01 Basic Plan $860 Nov 22, 2021 Subscribed
02 Premium Plan $1200 Nov 10, 2021 Unsubscribed
03 Basic Plan $860 Nov 19, 2021 Subscribed
04 Corporate Plan $1599 Nov 22, 2021 Subscribed

Hoverable Rows

Use table-hover class to enable a hover state on table rows within a <tbody>.

Order ID Shop Customer Price Action
#541254265 Amezon Cleo Carson $4,521
#744145235 Shoppers Juston Eichmann $7,546
#9855126598 Flipkart Bettie Johson $1,350
#847512653 Shoppers Maritza Blanda $4,521
ID Invoice Amount Date Status Action
01 Basic Plan $860 Nov 22, 2021 Subscribed
02 Premium Plan $1200 Nov 10, 2021 Unsubscribed
03 Basic Plan $860 Nov 19, 2021 Subscribed
04 Corporate Plan $1599 Nov 22, 2021 Subscribed

Card Tables

Use table-card class to show card-based table within a <tbody>.

ID Name Date Total Status Action
#VL2110 William Elmore 07 Oct, 2021 $24.05 Paid
#VL2109 Georgie Winters 07 Oct, 2021 $26.15 Paid
#VL2108 Whitney Meier 06 Oct, 2021 $21.25 Refund
#VL2107 Justin Maier 05 Oct, 2021 $25.03 Paid

Active Tables

Use table-active class to highlight a table row or cell.

Order ID Shop Customer Price Action
#541254265 Amezon Cleo Carson $4,521
#744145235 Shoppers Juston Eichmann $7,546
#9855126598 Flipkart Bettie Johson $1,350
#847512653 Shoppers Maritza Blanda $4,521

Bordered Tables

Use table-bordered class to show borders on all sides of the table and cells.

ID Title Status Assignee Price
01 Implement new UX Backlog Lanora Sandoval $4,521
02 Design syntax In Progress Calvin Garrett $7,546
03 Configurable resources Done Florence Guzman $1,350
04 Implement extensions In Progress Maritza Blanda $4,521

Tables Border Colors

Use border- class with color variation class to set table border color.

ID Title Status Assignee Price
01 Implement new UX Backlog Lanora Sandoval $4,521
02 Design syntax In Progress Calvin Garrett $7,546
03 Configurable resources Done Florence Guzman $1,350
04 Implement extensions In Progress Maritza Blanda $4,521

Tables Without Borders

Use table-borderless to set a table without borders.

ID Name Job Title Date Status
01 Annette Black Industrial Designer 10, Nov 2021 Active
02 Bessie Cooper Graphic Designer 13, Nov 2021 Active
03 Leslie Alexander Product Manager 17, Nov 2021 Active
04 Lenora Sandoval Applications Engineer 25, Nov 2021 Disabled

Small Tables

Use table-sm class to create any table more compact by cutting all cell padding in half.

ID Title Status Assignee
01 Implement new UX Backlog Lanora Sandoval
02 Design syntax In Progress Calvin Garrett
03 Configurable resources Done Florence Guzman
04 Implement extensions Backlog Maritza Blanda
05 Applications Engineer Done Leslie Alexander

Table Head

Use table-light or table-dark class to create <thead> appear light or dark.

Student Course Author Payment Process Status
Milana Scot UI/UX design Mitchell Flores $450
Confirmed
Jassica Welsh 3d Animation Dan Evgeni $860
Waiting
Leslie Alexander Logotype Design Olimpia Jordan $450
Waiting

Table Foot

Add <tbody> attribute to group footer content in an HTML table.

ID Name Job Title Date Payment
01 Annette Black Industrial Designer 10, Nov 2021 $450
02 Bessie Cooper Graphic Designer 13, Nov 2021 $875
03 Leslie Alexander Product Manager 17, Nov 2021 $410
Total $940

Captions

You can also put the <caption> attribute on the top of the table with caption-top class.

List of users
ID Student Course Author
01 Milana Scot UI/UX design Mitchell Flores
02 Jassica Welsh 3d Animation Dan Evgeni
03 Leslie Alexander Logotype Design Olimpia Jordan

Table Nesting

Example of basic table nesting. Border styles, active styles, and table variants are not inherited by nested tables.

ID Name Job Title Date Payment
01 Annette Black Industrial Designer 10, Nov 2021 $450
ID Student Course Author
I Milana Scot 3d Animation James Black
II Juston Eichmann Design syntax Olimpia Jordan
02 Bessie Cooper Graphic Designer 13, Nov 2021 $875
03 Leslie Alexander Product Manager 16, Nov 2021 $410
04 Bettie Johson Applications Engineer 24, Nov 2021 $620
05 Monkey Karry Implement new UX 25, Nov 2021 $795

Variants

Use table- class with below-mentioned color variation class within <tr> to set color on table row.

# Name Position Department
Default Monkey Karry Medical Specialist Orthopedics
Primary James White Medical Assistant Surgery
Secondary Aaron James Medical Specialist Neurology
Success Bettie Johson Medical Specialist Cardiology
Danger Bessie Cooper Medical Assistant Surgery
Warning Lenora Sandoval Medical Assistant Cardiology
Info Eric Pierce Medical Specialist Neurology
Light Ruth Zimmermann Medical Specialist Neurology
Dark Leslie Alexander Medical Assistant Cardiology

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 the top by default. Use the vertical align classes to re-align where needed.

Heading Heading Heading Heading
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. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.
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. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.
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. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.

Responsive Tables

Use table-responsive class to make any table responsive across all viewports. Responsive tables allow tables to be scrolled horizontally with ease.

ID Date Status Customer Purchased Revenue
#VZ2110 10 Oct, 14:47 Paid
Jordan Kennedy
Mastering the grid $9.98
#VZ2109 17 Oct, 02:10 Paid
Jackson Graham
Splashify $270.60
#VZ2108 26 Oct, 08:20 Refunded
Lauren Trujillo
Wireframing Kit for Figma $145.42
#VZ2107 02 Nov, 04:52 Cancel
Curtis Weaver
Wireframing Kit for Figma $170.68
#VZ2106 10 Nov, 07:20 Paid
Jason schuller
Splashify $350.87
Total $947.55
© Dosix.
Design & Develop by Themesbrand