Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Tableaux GC

Fonctionnalité instable

À être utilisé à vos propres risques. Toutes les fonctionnalités décrites ci-dessous pourraient être retirées à n'importe quelle version mineur/majeur ultérieure et l'ensemble des fonctionnalités provisoires sont exclues de l'API publique de GCWeb.

La documentation et/ou les exemples pratiques pourraient être incomplets ou être non disponible.

Voir l'ensemble des fonctionnalités provisoires.

Status
Provisional
Type
Système de conception de Canada.ca
Dernière revue
2021-06-16
Est conforme à
Spécifications du contenu et de l'architecture de l'information 2.1
Spécification
Tables - Système de conception de Canada.ca [à venir]
Nom technique
  • 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

Détails de la page

Date de modification :