Basic Tables - Axelit

Basic Table

Simple Table

Using the most basic table. Add .table class to table tag.

Id	Name	Position	Office	Status	Salary	Contact
1	Tiger Nixon	Architect	Edinburgh	active	$320,800	+1 (025) 466-7506
2	Garrett	Accountant	Tokyo	pending	$170,750	+1 (790) 476-9505
3	Ashton Cox	Technical	Francisco	pending	$86,000	+1 (227) 375-6641
4	Cedric Kelly	Developer	Edinburgh	active	$433,060	+1 (213) 619-7749
5	Airi Satou	Accountant	Tokyo	pending	$162,700	+1 (152) 465-2290
6	Williamson	Integration	New York	active	$372,000	+1 (185) 793-6446

Dark Table

Using the Dark table. Add .table-dark class to table tag.

Id	Name	Position	Office	Age	Salary
1	Tiger Nixon	Architect	Edinburgh	61	$320,800
2	Garrett Winters	Accountant	Tokyo	63	$170,750
3	Ashton Cox	Technical	San Francisco	66	$86,000
4	Cedric Kelly	Developer	Edinburgh	22	$433,060
5	Airi Satou	Accountant	Tokyo	33	$162,700
6	Williamson	Integration	New York	33	$162,700

Bordered Tables With Striped

Using the border table need to add .table-bordered class to table tag and .table-striped class for Strip table

Id	Name	Position	Office	Status	Salary
1	Tiger Nixon	Architect	Edinburgh	active	$320,800
2	Garrett Winters	Accountant	Tokyo	pending	$170,750
3	Ashton Cox	Technical	San Francisco	pending	$86,000
4	Cedric Kelly	Developer	Edinburgh	active	$433,060
5	Airi Satou	Accountant	Tokyo	pending	$162,700
6	Williamson	Integration	New York	active	$162,700

Tables Without Borders

Using the borderless table need to add .table-borderless class to table tag

Id	Name	Position	Office	Age	Salary
1	Tiger Nixon	active	Edinburgh	61	$320,800
2	Garrett Winters	pending	Tokyo	63	$170,750
3	Ashton Cox	pending	San Francisco	66	$86,000
4	Cedric Kelly	active	Edinburgh	22	$433,060
5	Airi Satou	pending	Tokyo	33	$162,700
6	Williamson	active	New York	33	$162,700

Hoverable Table

Using the Hoverable table need to add .table-hover class to the table tag

Id	Name	Position	Office	Status	Salary	Contact
1	Tiger Nixon	Architect	Edinburgh	active	$320,800	+1 (025) 466-7506
2	Garrett Winters	Accountant	Tokyo	pending	$170,750	+1 (790) 476-9505
3	Ashton Cox	Technical	San Francisco	pending	$86,000	+1 (227) 375-6641
4	Cedric Kelly	Developer	Edinburgh	active	$433,060	+1 (213) 619-7749
5	Airi Satou	Accountant	Tokyo	pending	$162,700	+1 (152) 465-2290
6	Williamson	Integration	New York	active	$162,700	+1 (185) 793-6446

Small Table

Using the small table need to add .table-sm class to table tag

Id	Name	Position	Office	Age	Salary
1	Tiger Nixon	Architect	Edinburgh	61	$320,800
2	Garrett Winters	Accountant	Tokyo	63	$170,750
3	Ashton Cox	Technical	San Francisco	66	$86,000
4	Cedric Kelly	Developer	Edinburgh	22	$433,060
5	Airi Satou	Accountant	Tokyo	33	$162,700
6	Williamson	Integration	New York	33	$162,700

Large Table

Using the large table need to add .table-lg class to table tag

Id	Name	Position	Office	Status	Salary
1	Tiger Nixon	Architect	Edinburgh	active	$320,800
2	Garrett Winters	Accountant	Tokyo	pending	$170,750
3	Ashton Cox	Technical	San Francisco	pending	$86,000
4	Cedric Kelly	Developer	Edinburgh	active	$433,060
5	Airi Satou	Accountant	Tokyo	pending	$162,700
6	Williamson	Integration	New York	active	$162,700

Table With Bottom Border

Using the bottom bordered table need to add .table-bottom-border class to table tag

Id	Name	Position	Office	Salary
1	Tiger Nixon	architect	Edinburgh	$320,800
2	Garrett	accountant	Tokyo	$170,750
3	Ashton Cox	technical	Francisco	$86,000
4	Evert	developer	New York	$36,000
5	Murazik	accountant	New York	$62,000
6	Williamson	developer	New York	$894,000

Table Striped Columns

Using the column strip table need to add .table-striped-columns class to table tag

Id	Name	Position	Office	Age	Salary
1	Tiger Nixon	Architect	Edinburgh	61	$320,800
2	Garrett Winters	Accountant	Tokyo	63	$170,750
3	Ashton Cox	Technical	San Francisco	66	$86,000
4	Cedric Kelly	Developer	Edinburgh	22	$433,060
5	Airi Satou	Accountant	Tokyo	33	$162,700
6	Williamson	Integration	New York	33	$162,700

Table Variants

Using the Color Variants table need to add .table-Variants class to table tag

Id	Name	Position	Office	Age	Salary
1	Tiger Nixon	Architect	Edinburgh	61	$320,800
2	Garrett Winters	Accountant	Tokyo	63	$170,750
3	Ashton Cox	Technical	San Francisco	66	$86,000
4	Cedric Kelly	Developer	Edinburgh	22	$433,060
5	Airi Satou	Accountant	Tokyo	33	$162,700
6	Williamson	Integration	New York	33	$162,700

Nesting Table

Border styles, active styles, and table variants are not inherited by nested tables.

First

Last

Handle

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last

Larry

the Bird

@twitter

Einar

Miller

@twitter

Layne

Paucek

@twitter

Two Way Table

Using the two direction table need to add .text-end class to last table head table data

Name	Salary
Tiger Nixon	$320,800
Garrett	$170,750
Ashton Cox	$86,000
Williamson	$547,000

Always Responsive

Apply .table-responsive- "sm","md","lg" ,"xl","xxl" make tables scroll horizontally on smaller screens while displaying normally on larger ones.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
4	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell