{{#markdown}}
The basic data table can be implemented by adding two classes to the table
tag: .small
and .data-table
. A third tag that might be useful is .no-stripe
to remove the zebra striping.
Alternativley to adding .data-table
there are a range of utility classes that can be used to assemble the desired look and feel:
- Smaller text: add a .small
to the table tag, or any tr or td.
- Disable tables from going 100% wide: add a .width-auto
to the table tag.
- Align text to top: add .align-top
to the table tag or a td.
- Remove striping: add .no-stripe
to the table tag.
- Change padding: add either of these classes to the table tage or td, .padding-none
.padding-small
.
- Allow images to be stretched out of proportion: add .stretch
to the image.
Consider this sample table from ChEMBL which we have done with `table.small.data-table.no-stripe`: