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.
First Name | Last Name | Score |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Steve | Ross | 78 |
Styled Table Style
This table stacks data vertically on smaller screen sizes and uses a hover state on table rows.
First Name | Last Name | Score |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Steve | Ross | 78 |
Striped Table Style
This table adds a zebra-striping style to the table rows.
First Name | Last Name | Score |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Steve | Ross | 78 |
Responsive Table Style
This table has a horizontal scrollbar that kicks in when the table is too wide to fit on the screen.
First Name | Last Name | Score |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Steve | Ross | 78 |