Skip to Main Content

Pelican Design System icon Pelican Design System Table, Scrollable

Table, Scrollable

Scrollable tables allow users to compare and review large amounts of data unrestricted by window size.

On this page:

Best Practice

  • Do not use table-striped on this table.
  • You may need to reduce the window’s width to see the table’s horizontal scrolling.
  • Tables allows the user to compare data.
  • Use accessible Table markup, like what’s provided.
  • Pagination goes below a table if you need it.
  • Use Tables to display tabular data, not for layout.
  • Tables size their columns by the longest amount of unbroken text in either the column header or the column.
  • Use Cards for browsing content.
  • Use Tables for comparing data.

Usage

See the Pen Table Striped by LA Gov Design Team (@lagovdesignteam) on CodePen.

Resources

Page top