The Yale UI Component Library does not include Bootstrap’s _tables.scss file. Instead, we include more simple table styles. Future work on tables may come depending on community feedback. Bootstrap’s tables documentation will not be helpful.
Tables style are applied to all table elements. Table styles are not opt-in with a .table class, as they are in Bootstrap.
Tables are automatically 100% width.
Tables are subtly striped by default.
To remove borders, use the .table-borderless class.
Wrap tables in a div with class .table-responsive to allow the table itself to scroll horizontally. Give the table itself tabindex=0 to make the horizontal scroll operable to keyboard-only users.
Avoid tables for layout. Tables should be for data only.
Tables should have descriptive column headers. Column header should have a scope="col" attribute. Lengthy or confusing tables should also have row headers. Row headers should have a scope="row" attribute.
Avoid complex tables with merged table cells or multiple levels of headers. These tables can be difficult to mark up correctly with accessibility in mind. Avoid leaving cells empty for formatting purposes.