Tables

Usage

• The number of <th> elements should match the number of <td> elements in a row to ensure proper alignment, spacing, and styling of the table heading's bottom border.
• Action items such as edit or delete should appear as icon links with a descriptive table heading.
• Individual cells and table headings should typically be left aligned, the exception being currencies, or other numbers that align better from the right, and the last column which can be centered depending on the content. Table headers should typically match the alignment of the content in the column.

Class Modifiers & Utilities

table-striped adds a light gray background to every other table row. This class can be used for larger tables to make rows easier to read.

table-responsive is a wrapper class for tables which has a max-width set to 100% and overflow-x set to auto. This adds a scrollbar to the bottom of the table's container to allow scrolling vs. the table overflowing the container.

table-sticky makes the table headers stick to the top of a scrollable container as the table is scrolled. Works well with scroll-container CSS class.

text-nowrap prevents text wrapping to a second line. This can make a table look cleaner, however it will likely increase the widths of larger tables and should probably be used with the table-responsive utility.

text-smaller can be applied to the entire table to decrease the font-size on larger tables, allowing it to fit more within the viewing area.