CanAdmin Dashboard

Basic Table

Here you can see a simple table example from the dashboard:

#	First	Last	Handle
1	John	Doe	@johndoe
2	Jane	Smith	@janesmith
3	Michael Brown		@michaelbrown

Striped Rows

Use .table-striped to add zebra-striping to table rows.

#	First	Last	Handle
1	John	Doe	@johndoe
2	Jane	Smith	@janesmith
3	Michael Brown		@michaelbrown

Add.table-striped-bg-*statesto change background from striped rows

#	First	Last	Handle
1	John	Doe	@johndoe
2	Jane	Smith	@janesmith
3	Michael Brown		@michaelbrown

#	First	Last	Handle
1	John	Doe	@johndoe
2	Jane	Smith	@janesmith
3	Michael Brown		@michaelbrown

Responsive Table

To make your tables scrollable on small screens, wrap them in a .table-responsive div.

#	Product	Category	Specification	Color	Stock Status	Price
1	Apple iPhone 15	Smartphone	128 GB	Black	In Stock	$899
2	Samsung Galaxy S23	Smartphone	256 GB	Silver	In Stock	$799
3	Lenovo ThinkPad X1	Laptop	16 GB RAM	Carbon Black	Out of Stock	$1,299

Hover Effect Table

#	First	Last	Handle
1	Olivia	Turner	@oliviaturner
2	David	Wilson	@davidwilson
3	Sophia Martinez		@sophiamartinez

Bordered Table

Add.table-bordered to create a bordered table

#	First	Last	Handle
1	Emma	Johnson	@emmajohnson
2	Lucas	Anderson	@lucasanderson
3	Mia 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

#	First	Last	Handle
1	Ella	Walker	@ellawalker
2	Henry	Evans	@henryevans
3	Grace Lee		@gracelee

Succest Table

#	First	Last	Handle
1	Daniel	Harris	@danielharris
2	Chloe	Robinson	@chloerobinson
3	Benjamin Scott		@benjaminscott

Primary Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter