cf-tables

Responsive table styles for Small Screens

Table base style, with small screen base style “stacked”

Shrink to mobile size to test.

Column 1	Column 2	Column 3
Row A	Cell A2	Cell A3
Row B	Cell B2	Cell B3
Row C	Cell C2	Cell C3
Row D	Cell D2	Cell D3

Table with small screen variation - “stacked with entry header”

Shrink to mobile size to test.

Column 1	Column 2	Column 3
Row A	Cell A2	Cell A3
Row B	Cell B2	Cell B3
Row C	Cell C2	Cell C3
Row D	Cell D2	Cell D3

Table with small screen variation - “Comparative with horizontal scroll”

Shrink to mobile size to test.

Column 1	Column 2	Column 3	Column 4	Column 5	Column 6	Column 7	Column 8
Row A	Cell A2	Cell A3	Cell A4	Cell A5	Cell A6	Cell A7	Cell A8
Row B	Cell B2	Cell B3	Cell B4	Cell B5	Cell B6	Cell B7	Cell B8
Row C	Cell C2	Cell C3	Cell C4	Cell C5	Cell C6	Cell C7	Cell C8
Row D	Cell D2	Cell D3	Cell D4	Cell D5	Cell D6	Cell D7	Cell D8

Additional table styles

Right-aligned cells.

Column 3 should be right aligned.

Column 1	Column 2	Column 3
Row A	Cell A2	Cell A3
Row B	Cell B2	Cell B3

Standard table, with stripes

Column 1	Column 2	Column 3
Row A	Cell A2	Cell A3
Row B	Cell B2	Cell B3
Row C	Cell C2	Cell C3
Row D	Cell D2	Cell D3

Sortable Tables

Sample Sortable Table

Agency
Alpha	English	2.6 mi
Beta	English, Spanish	1.4 mi
Gamma	English, French, Spanish	1.4 mi
Delta	English, Spanish	3.2 mi
Epsilon	English	1.6 mi
Zeta	English, Spanish	1.2 mi
Eta	English	11.1 mi