Optimizely: Tables

Tables do not perform well on small screens, so should be avoided unless the content truly needs the tabular structure.

Base Table Style

This is the basic table styling with light padding and only horizontal dividers.

Uploaded Image (Thumbnail)

Styled Table Style

This table stacks data vertically on smaller screen sizes and uses a hover state on table rows.

Uploaded Image (Thumbnail)

Striped Table Style

This table adds a zebra-striping style to the table rows.

Uploaded Image (Thumbnail)

Responsive Table Style

This table has a horizontal scrollbar that kicks in when the table is too wide to fit on the screen.

Uploaded Image (Thumbnail)