Tables

Tables present tabular information in a two-dimensional format. By default, Bootstrap's table styling is slightly more minimal than what Material Design specifies, but builds to offer more options than what is in Material's specifications. For this reason, we start with Bootstrap's default table, style it to fit Material Design's guidelines, and build on additional, optional classes from the default state.

Material Admin Pro also provides an interactive data tables plugin in addition to the table content styling on this page.

Default Table

Bootstrap's default table has been modified to match Material's table styling. The font size has been brought down in size, with the text color being made intentionally darker for higher contrast and greater legibility.

The below is an example of the default table. Material's base styling for tables, which features hoverable rows and borders surrounding the table, are shown in the examples after this one.

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

Bordered Table

By adding the .table-bordered class to the table element, the Bootstrap table design is one step closer Material's default design.

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

Hoverable Rows

By adding the .table-hover class to the table element in conjunction with the .table-bordered class, the table design now matches the Material Design default.

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

Striped Rows

By adding the .table-striped class to the table element, every other row will feature a slightly darker background color. This feature is outside of Materail Design's specifications, but can enhance the readability of a table, especially when working with large data sets.

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

Small Table

By adding the .table-sm class to the table element, the padding of each table cell is decresed. This table format is especially useful for considerably large data sets.

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

Dark Table

By adding the .table-dark class to the table element, the table will take on an inverse color system with a dark background and light text.

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

Adding Color

Color can be added to the entire table by using a table background class. These classes are named using the format .table-{color} where color is any color defined on the color map.

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

Color can be added to a single row as well, also using the same .table-{color} classes.

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

Color can also be applied to a single cell using the table color classes.

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

The table specific background classes are used to change the color of entire tables, rows, or individual cells. The classes are named using the format .table-{color} where color is any color defined within the color map.

The color options for tables are compatible with the hover, striped, and other table states.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
2	Jacob	Thornton	@fat
2	Jacob	Thornton	@fat
2	Jacob	Thornton	@fat
2	Jacob	Thornton	@fat
2	Jacob	Thornton	@fat
2	Jacob	Thornton	@fat