Basic Table
Here you can see a simple table example from the dashboard:
#FirstLastHandle
1JohnDoe@johndoe
2JaneSmith@janesmith
3Michael Brown@michaelbrown
Striped Rows
Use .table-striped to add zebra-striping to table rows.
#FirstLastHandle
1JohnDoe@johndoe
2JaneSmith@janesmith
3Michael Brown@michaelbrown
Add.table-striped-bg-*statesto change background from striped rows
#FirstLastHandle
1JohnDoe@johndoe
2JaneSmith@janesmith
3Michael Brown@michaelbrown
#FirstLastHandle
1JohnDoe@johndoe
2JaneSmith@janesmith
3Michael Brown@michaelbrown
Responsive Table
To make your tables scrollable on small screens, wrap them in a .table-responsive div.
#ProductCategorySpecificationColorStock StatusPrice
1Apple iPhone 15Smartphone128 GBBlackIn Stock$899
2Samsung Galaxy S23Smartphone256 GBSilverIn Stock$799
3Lenovo ThinkPad X1Laptop16 GB RAMCarbon BlackOut of Stock$1,299
Hover Effect Table
#FirstLastHandle
1OliviaTurner@oliviaturner
2DavidWilson@davidwilson
3Sophia Martinez@sophiamartinez
Bordered Table
Add.table-bordered to create a bordered table
#FirstLastHandle
1EmmaJohnson@emmajohnson
2LucasAnderson@lucasanderson
3Mia Thompson@miathompson
It can also add.table-head-bg-*statesso that the table header has the same color as the border color of the table
#FirstLastHandle
1EllaWalker@ellawalker
2HenryEvans@henryevans
3Grace Lee@gracelee
Succest Table
#FirstLastHandle
1DanielHarris@danielharris
2ChloeRobinson@chloerobinson
3Benjamin Scott@benjaminscott
Primary Table
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter