Language selection

Government of Canada / Gouvernement du Canada

Search

GC tables

Unstable feature

To be used at your own risks. All functionalities described below could be removed in any subsequent minor/major release and are excluded from the GCWeb public API.

Documentation and/or working examples for those features could be incomplete or not available.

See all provisional features.

Status
Provisional
Type
Canada.ca design pattern
Last review
2021-06-16
Conforming to
Content and IA spec 2.1
Guidance
Tables - Canada.ca design pattern [coming soon]
Technical name
  • gc-table

Working example

A simple CSS solution to that turns tables into responsive cards for smaller viewports.

This pattern currently is:

Responsive cards

Population growth in Canadian cities
City Population in 2007 Population in 2017 Percentage change
Toronto 5,418,207 6,346,088 17.1%
Montréal 3,714,846 4,138,254 11.4%
Vancouver 2,218,134 2,571,262 15.9%
Ottawa–Gatineau 1,188,073 1,377,016 15.9%
Calgary 1,246,337 N/A

Responsive cards with text left on one item

Optional

The class text-left can be added to any <td> so that it aligns to the left side on the cards.

Telephone numbers for personal taxes, benefits and trusts
Reason for your call Number Hours
  • Item one
  • Item two
 1-XXX-XXX-XXXX Always open (automated line)
  • Item one
  • Item two
 1-XXX-XXX-XXXX Always open (automated line)
  • Item one
  • Item two
 1-XXX-XXX-XXXX Always open (automated line)
  • Item one
  • Item two
 1-XXX-XXX-XXXX Always open (automated line)

Responsive cards with small class for smaller text

Optional

The class small can be added to the <table> to make all the text smaller

The following is a list of ranitidine products being recalled in Canada at this time
Company Product Name/Active Pharmaceutical Ingredient (API) DIN Strength Lot Date added
Apotex Inc. Acid Reducer (ranitidine) sold under the brand names Equate and Selection 02296160 150 mg All lots September 25, 2019
Apotex Inc. Apo-Ranitidine Oral Solution 02280833 15 mg/mL All lots September 25, 2019
Apotex Inc. Apo-Ranitidine Tablet 150mg 00733059 300 mg All lots September 25, 2019

Responsive cards with table-bordered class for table borders

Optional

The class table-bordered can be added to the <table> to add borders to the table in medium view and over.

Common web browsers
Name Engine Developer
Chrome Blink Google
Firefox Gecko Mozilla
Safari WebKit Apple

Responsive cards with ``wb-tables`` class for filterable tables

Optional

The class wb-tables can be added to the <table> to make it use WET's tables plugin. Please note that scrollable and responsive WET tables are unsupported.

Immunization clinics
Name City Province
Clinic 1 Edmonton Alberta
Clinic 2 Toronto Ontario
Clinic 3 Montréal Québec

Page details

Date modified: