Demonstration and documentation

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:

Parent Molecule	Synonyms	Phase	Research Codes	Applicants	USAN Stem	USAN Year	First Approval	ATC Code	Icon
CHEMBL566315	Obeticholic acid (FDA, INN, USAN)	4	DSP-1747 INT-747	Intercept Pharmaceuticals		2008	2016	A05AA04
CHEMBL607400	Brivaracetam (FDA, INN, USAN)	4	UCB-34714	Ucb Inc Ubc Inc	-racetam	2005	2016	N03AX23
CHEMBL1743034	Ixekizumab (FDA, INN, USAN)	4	LY-2439821	Lilly Eli Lilly And Co.	-mab	2010	2016

For further discussion on data table styling, see this issue.