Tables

The Template Package 4.x framework includes several options to optimize the display of data tables depending based on the number of columns and rows and their content.

Table Styles

Default

Simple / default table implementation
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Dark Head - Primary (class: thead-dark)

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Light Head - Secondary (class: thead-light)

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Primary - (class: table-striped-dark)

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Secondary - (class: table-striped-light)

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover Primary

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover Secondary

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Caption

This is an example table, and this is its caption to describe the contents.
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table with Small Text

Characteristic Estimated no. Age-adjusted§
% (95% CI)
Total (unadjusted) 3,121,000 1.3 (1.2–1.4)
Total (age-adjusted) 3,121,000 1.2 (1.1–1.3)
Age group (yrs)
18–24 152,000 0.5 (0.3–0.8)
25–44 798,000 1.0 (0.8–1.1)
45–64 1,394,000 1.7 (1.5–1.9)
≥65 777,000 1.7 (1.4–1.9)
Sex
Men 1,219,000 1.0 (0.9–1.2)
Women 1,902,000 1.5 (1.3–1.6)
Race/Ethnicity
Non-Hispanic white 2,363,000 1.4 (1.3–1.6)
Non-Hispanic black 174,000 0.6 (0.4–0.8)
Hispanic 427,000 1.2 (0.9–1.6)
Non-Hispanic other 157,000 0.8 (0.6–1.2)

Enhanced Horizontal Scrolling

Tables that have many columns may not easily fit within the available display space. Wider tables can be especially difficult to view in smaller viewports where additional content wrapping may occur. To address this issue, Enhanced Horizontal Scrolling can be enabled per table and per viewport. When Enhanced Horizontal Scrolling is enabled, the maximum area of the table that will fit in the display space will be shown and users can scroll the table left and right to view all of the content. Because this option can be enabled by viewport, it is considered a responsive behavior. When enabled, Enhanced Horizontal Scrolling only applies to the S and XS viewports by default, but it can be enabled for M, L, XL, and XXL viewports.

  • Can be enabled per table and per viewport
  • Can be enabled for any viewport, but the default is for S and XS viewports

Table Cell Data Indent

To control indentation level for a single cell or group of cells, select the cells and then set the “Indentation Level” in Table Cell Properties.

Enhanced Vertical Scrolling

Tables that have many rows may require users to vertically scroll for a long time before reaching any content below the table. This can be problematic on pages with multiple tables and pages that combine other content with supplemental tables, such as journal articles. Longer tables can be especially difficult to view in smaller viewports. To address this issue, Enhanced Vertical Scrolling can be enabled per table and per viewport. When is enabled, users can set the number of table rows that are displayed above a "Show More" button. Clicking or tapping the "Show More" button displays all of the table rows and hides the button. Becasue this option can be enabled by viewport, it is considered a responsive behavior. When enabled, Responsive Vertical Scrolling only applies to the S and XS viewports, but it can be enabled for M, L, XL, and XXL viewports.

  • Options: Can be enabled per table and for any viewport, but the default is for S and XS viewports
  • Last Table Row Text: opacity of op-50
  • Show More Button: button color is [color]-primary from primary theme, Padding is pt-2, pr-3, pb-2, pl-3, color is 5% darker on Hover
  • Show More Button Text: label cannot be changed from "Show More", Text is Open Sans, Normal, white and centered, Text is underlined on Hover
  • Show More Button Width: col-12 in S and XS viewports, col-3 in M, L, XL, and XXL viewports
View Page In: PDF [150k] DOC [150k]
Page last reviewed: