Tables

Table Formats

Tables should be reserved only to display tabular data, not for layout. For accessibility, tables need to contain captions and appropriate use of thead, tbody, and tfoot. Keep in mind that tables do not display well on mobile devices, so they should be kept to a minimum and alternate methods should be used.

Standard Tables

Standard formatting shows minimal styling and borders in order to maintain a simple appearance. Apply via a tble class.

Breakpoint Minimum Width Maximum Width Layout Class Gutter Width
1280 1200 None col-xl 2em (20px)
1024 960 1199 col-lg 2em (20px)
768 720 959 col-md 1.5em (15px)
480 420 719 col-sm 1.5em (15px)
0 0 419 col-xs 1em (10px)

Bordered Tables

To provide clarity on tables with multiple columns, add borders via the tble-bordered class.

Breakpoint Minimum Width Maximum Width Layout Class Gutter Width
1280 1200 None col-xl 2em (20px)
1024 960 1199 col-lg 2em (20px)
768 720 959 col-md 1.5em (15px)
480 420 719 col-sm 1.5em (15px)
0 0 419 col-xs 1em (10px)

Striped Tables

To provide clarity on tables with multiple rows, add striping via the tble-striped class.

Breakpoint Minimum Width Maximum Width Layout Class Gutter Width
1280 1200 None col-xl 2em (20px)
1024 960 1199 col-lg 2em (20px)
768 720 959 col-md 1.5em (15px)
480 420 719 col-sm 1.5em (15px)
0 0 419 col-xs 1em (10px)

Table Options

Complex Tables

Tables may contain colspan or rowspan, as well as a footer.

My Wallet
Award Type Current YTD Shop
Personal Points 1,000 2,000 Shop
Flex Points 1,000 1,000 Shop
Prepaid Card $100 $250
Vacation Days 2
Free Lunch 5
ESTIMATED TOTAL BENEFIT $1,800

Captions

Captions are required for accessibility purposes. Captions display at the bottom of the table.

This is a caption
Breakpoint Minimum Width Maximum Width Layout Class Gutter Width
1280 1200 None col-xl 2em (20px)
1024 960 1199 col-lg 2em (20px)
768 720 959 col-md 1.5em (15px)
480 420 719 col-sm 1.5em (15px)
0 0 419 col-xs 1em (10px)

Responsive Tables

Table widths should be defined in relative percentages to ensure they display appropriate on mobile devices. For larger tables, wrap the table in the tble-responsive class so the table scrolls horizontally.

This is a caption
Breakpoint Minimum Width Maximum Width Layout Class Gutter Width
1280 1200 None col-xl 2em (20px)
1024 960 1199 col-lg 2em (20px)
768 720 959 col-md 1.5em (15px)
480 420 719 col-sm 1.5em (15px)
0 0 419 col-xs 1em (10px)