Datta Able - Most Complete Bootstrap Admin Template

Basic Table

use class table inside table element

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

Hover Table

use class table-hover inside table element

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

Dark Table

use class table-dark inside table element

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

Striped Table

use class table-striped inside table element

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

Contextual Classes

For Make row Contextual add Contextual class like .table-success in tr tag and For cell add Contextual class in td or th tag .

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
4	Larry	the Bird	@twitter
5	Larry	the Bird	@twitter
6	Larry	the Bird	@twitter
7	Larry	the Bird	@twitter
8	Larry	the Bird	@twitter
9	Larry	the Bird	@twitter

Background Utilities

Regular table background variants are not available with the inverse table, however, you may use text or background utilities to achieve similar styles.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
4	Larry	the Bird	@twitter
5	Larry	the Bird	@twitter
6	Larry	the Bird	@twitter
7	Larry	the Bird	@twitter
8	Larry	the Bird	@twitter
9	Larry	the Bird	@twitter

Extra Large Table

Example of Extra large table, Add .table-xl class to the .table to create a table with extra large spacing. Extra larger table all rows have 1.05rem height.

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

Vertical Borders

Example of vertical table borders. This is a default table border style attached to .table class. All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using .table-framed class added to the table with .table class.

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

Table Header Styling

use class table-primary, table-* inside thead tr element

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

Table Footer Styling

use class table-info inside tfoot element

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

Custom Table Color

use class table-* inside table element

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

Josephin DoeTyping . .

Lary Doeonline

Aliceonline

Alia10 min ago

Suzen15 min ago

Josephin DoeTyping . .

Lary Doeonline

Aliceonline

Alia10 min ago

Suzen15 min ago

Josephin DoeTyping . .

Lary Doeonline

Aliceonline

Alia10 min ago

Suzen15 min ago

Josephin DoeTyping . .

Lary Doeonline

Aliceonline

Alia10 min ago

Suzen15 min ago

Josephin Doe

Bootstrap Basic Tables

Basic Table

Hover Table

Dark Table

Striped Table

Contextual Classes

Background Utilities

Extra Large Table

Vertical Borders

Table Header Styling

Table Footer Styling

Custom Table Color