Tables

Table List

A table styled like a list. The active state can be invoked by adding class table-active to the <tr></tr> element.

Table List with Table Striped

Table List with Table Hover

Table List with Table Bordered

Table List (Inline Edit Table) Example

Table Helpers

table-autofit constrains table columns to be only as wide as its content, but must be used with table-cell-expand. table-cell-expand will fill the remaining space.

Use table-cell-expand-small, table-cell-expand-smaller, table-cell-expand-smallest with table-cell-expand to size columns smaller relative to the widest column.

We have added table-cell-minw-50, table-cell-minw-75, table-cell-minw-100, table-cell-minw-150, table-cell-minw-200, table-cell-minw-250, table-cell-minw-300, table-cell-minw-350, table-cell-minw-400 to set min-width 50px, 75px, 100px, 150px, 200px, 250px, 300px, 350px, 400px on a specific table column, respectively.

The helpers table-cell-ws-normal and table-cell-ws-nowrap sets white-space to normal or nowrap on a specific table column, respectively.

table-heading-nowrap keeps headings on one line.

table-nowrap keeps everything on one line.

table-img is a helper that sets the max-height to 100px on an image inside a table. Depending on your use case, you may need to use it with the autofit-row pattern.

	ID	Title	Status	Modified Date	Display Date	Author	Type
	21146	Wings eu, pumpkin spice robusta, kopi-luwak mocha caffeine froth grounds.	--	2 Hours Ago	--	Stanley Nelson	Folder

Vertical Alignment

We have added some classes to help vertically align contents inside a table. The classes table-valign-bottom, table-valign-middle, and table-valign-top on <table> will vertically align table cell contents on the bottom, middle, and top, respectively.

The classes thead-valign-bottom, thead-valign-middle, and thead-valign-top on <table> will vertically align the contents inside the table head.

The classes tbody-valign-bottom, tbody-valign-middle, and tbody-valign-top on <table> will vertically align the contents inside the table body.

Table Column Text-{start|center|end}

We have added some classes to help horizontally align contents inside a table column. The classes table-column-text-start, table-column-text-center, and table-column-text-end will align text left, center, and right respectively.

Table

Table Striped

Table Bordered

Table Hover