AppStrap.

Default Styles

Add the class .table to opt-in to the default table styling.

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

---

Inverse Table

Add the class .table-inverse to inverse the table styling.

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

---

Striped rows

Add the class .table-striped to apply alternating table row background colours. Works with both default and inverse tables.

Default

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

Inverse striped

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

---

Bordered table

Add the class .table-bordered to apply borders to the table and table rows. Works with both default and inverse tables.

Default

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

Inverse bordered

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

---

Hoverable rows

Add the class .table-hover to apply a hover effect to rows when they are hovered. Works with both default and inverse tables.

Default

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

Inverse hoverable rows

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

---

Small Tables

Add the class .table-sm to apply more compact padding to table cells. Works with both default and inverse tables.

Default

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

Inverse small table

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

---

Table head

Add the classes .thead-default or .thead-inverse to alter the background colour of thead elements.

Default

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

Inverse table head

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

---

Table row & cell colours

On non-inverse tables you can apply the follow classes to either tr or td or th elements to change the background colour.

Class	Column heading	Column heading
.table-active	Column content	Column content
.table-info	Column content	Column content
.table-success	Column content	Column content
.table-warning	Column content	Column content
.table-danger	Column content	Column content

Inverse table row & cell colours

Inverse tables can use the contextual background colours to alter tr or td or th background colours.

Class	Column heading	Column heading
.bg-primary	Column content	Column content
.bg-info	Column content	Column content
.bg-success	Column content	Column content
.bg-warning	Column content	Column content
.bg-danger	Column content	Column content

---

Responsive Tables

Add a wrapper with the class .table-responsive to make tables scrollable horizontally on small screenwidths. Resize the screen to see the example below.

---

Reflow Tables

Add the class .table-reflow to move table headers into the first column for an alternative display option for simple table data.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

---

Vertical alignment

You acn set the vertical alignment of table cell & head content using these classes.

align-baseline

align-top

align-middle

align-bottom

align-text-top

align-text-bottom