FreddieMac.com

Tables

Examples of Striped, Unstriped, and Scrolling Tables.

Table rows are striped by default, and tables stretch full width of their container.

  1. Add class hover to large tables to add row highlighting for mouse users.
  2. Add class unstriped to very short tables where striping is not desired. 
  3. Wrap all tables that are too wide for mobile display in a div with class   table-scroll  to enable horizontal scrolling when a table is too wide for the viewport.  
  4. For complex tables, update the markup to convert the table to a stacked design at mobile, and ensure that each row has a header in the first cell for the mobile layout.
  5. Multifamily tables use a green background for the primary table header, but otherwise match the patterns below.
Striped Table Header Table Header Table Header Table Header
Row Header This is longer Content Goes Here Donec elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Row Header This is longer Content Goes Here Donec elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Row Header This is longer Content Goes Here Donec elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Row Header This is longer Content Goes Here Donec elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Footer Row Header Footer content Footer content Footer content

 

Unstriped

Table Header Table Header Table Header
Row Header Content Goes Here Content Goes Here
Row Header Content Goes Here Content Goes Here

 

Wide table to demo table scroll advantage

Auction Date Structure CUSIP Settlement Date Maturity Date Coupon Amount Awarded($) Non-Comp Award % Stop Rate(Yield) % Allocated at Stop Price Bid to Cover Ratio Reopening Underwriters
06/26/2017 3Year 3ABCDEFGH 06/27/2017 05/01/2020 1.37500 $500,001,000 0.000 1.528 14.286 99.575 2.910 Yes StoneX Financial Inc
PNC CAPITAL MARKETS LLC
02/08/2017 3Year 3IJKLMNOP 02/09/2017 01/17/2020 1.50000 $500,002,000 0.000 1.480 66.667 100.057 3.950 Yes CASTLEOAK SECURITIES, LP

 

When you need to add subheader rows in a table, add class row-subheader to the table row.

Table Header Table Header Table Header
Table Subheader Table Subheader Table Subheader
Row Header Content Goes Here Content Goes Here
Row Header Content Goes Here Content Goes Here
Row Header Content Goes Here Content Goes Here
Table Subheader that Spans
Row Header Content Goes Here Content Goes Here
Row Header Content Goes Here Content Goes Here