Tables
Examples of Striped, Unstriped, and Scrolling Tables.
Table rows are striped by default, and tables stretch full width of their container.
- Add class
hover
to large tables to add row highlighting for mouse users. - Add class
unstriped
to very short tables where striping is not desired. - 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. - 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.
- 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 |