Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Example Admin Table
Add the base class .custom-table-1 to any <table>.
ID NO. Name Email Create Date Role Status Action
1 Mark Jostar jos@example.com 23-12-2023 Manager
Online
2 Mark Jostar jos@example.com 23-12-2023 Admin
Online
3 Mark Jostar jos@example.com 23-12-2023 Developer
Online
4 Mark Jostar jos@example.com 23-12-2023 Designer
Offline
5 Mark Jostar jos@example.com 23-12-2023 Designer
Offline
Example Payment Table
Add the base class .custom-table-1 to any <table>.
Order NO. ID Product Image Product Name Payment Date Price Status
00565 jozep1050 Headphone 5.1 23-12-2023 $150
Pending
00565 jozep1050 Headphone 5.1 23-12-2023 $150
Success
00565 jozep1050 Headphone 5.1 23-12-2023 $150
Success
00565 jozep1050 Headphone 5.1 23-12-2023 $150
Success
00565 jozep1050 Headphone 5.1 23-12-2023 $150
Cancel
Basic Table
Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped rows and columns
Use .table-striped or .table-striped-columns to add zebra-striping to any table row within the <tbody>.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Hover
Add .table-hover to enable a hover state on table rows within a <tbody>.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Border
Add .table-bordered for borders on all sides of the table and cells.
# 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.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Tables without borders
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter