Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi

Conseils & astuces CSS pour Web Style Sheets

Voir aussi l'index de tous les conseils.

Replier les colonnes d'un tableau

Cette page vous propose une méthode pour plier des colonnes de tableau avec la propriété 'visibility' et le sélecteur ': checked'. Elle devrait être comparée à la page similaire qui explique comment utiliser la propriété 'visibility' et le sélecteur ': target'. Voir cette page pour une explication de 'visibilité: effondrement'. Ici, je vais juste vous expliquer comment utiliser le sélecteur ' : checked' au lieu du sélecteur ' : target'.

Le tableau ci-dessous est configuré de telle sorte que si vous cliquez sur un nom de mois, vous occultez tous les mois à sa gauche. (Janvier ne fait rien.) Cliquez sur l'en-tête de la première colonne pour les faire apparaître à nouveau.

Premier exemple de tableau
Jan
First 56 28 85 24 67 27 67 20 21 74 45 48
Second 34 28 84 74 95 77 21 31 54 34 84 47

Méthode

Cela fonctionne comme suit : chaque en-tête de colonne est un élément <label> et en cliquant dessus vous activez un bouton radio. Tous les boutons radio ont name=colcontrol pour qu'ils fassent partie d'un seul groupe, c'est-à-dire qu'un seul d'entre eux peut être activé à la fois. Voici le bouton radio et l'en-tête de la colonne d'avril : 

<input id=v04 type=radio name=colcontrol>
...
<th><label for=v04>Apr</label>

Les boutons radio (éléments <input>) sont placés juste avant la table et, pour rendre la page plus élégante, ils sont rendus invisibles avec 'input {display: none}'.

Il existe plusieurs façons d'indiquer quelles colonnes doivent être visibles et lesquelles doivent être repliées lorsqu'un bouton radio est activé. J'ai choisi d'utiliser les classes : lorsque, par exemple, le bouton radio v09 est coché, toutes les colonnes de classe v09 sont repliées.

Cela signifie que chaque élément <col> doit avoir un ensemble de classes pour indiquer quand il doit être replié. Par exemple, la colonne correspondant à August devrait être repliée chaque fois que l'un des boutons radio pour septembre (v09), octobre (v10), novembre (v11) ou décembre (v12) est coché : 

<col class = "v12 v11 v10 v09">

Les règles CSS sont simples. J'ai douze boutons radio. (Il y a treize colonnes, mais 'Jan' n'a pas besoin d'un bouton). Onze d'entre eux font disparaître certaines colonnes, j'ai donc besoin de onze sélecteurs. Voici la feuille de style complète : 

input {display: none}
#v02:checked ~ table .v02, #v03:checked ~ table .v03,
#v04:checked ~ table .v04, #v05:checked ~ table .v05,
#v06:checked ~ table .v06, #v07:checked ~ table .v07,
#v08:checked ~ table .v08, #v09:checked ~ table .v09,
#v10:checked ~ table .v10, #v11:checked ~ table .v11,
#v12:checked ~ table .v12 {visibility: collapse}
label:hover {outline: thin solid; cursor: cell}

La dernière ligne est facultative, mais aide à indiquer visuellement que le label est cliquable.

Assurez-vous que les éléments <input> sont effectivement avant la table et non à l'intérieur d'un autre élément (il est facile de les mettre dans un <p> par erreur), sinon le sélecteur de frère ('~') ne fonctionne pas. Voir la section suivante.

Balisage

Voici la partie essentielle du balisage. Ou alors vous pouvez regarder la source de cette page. 

<input id=v01 type=radio name=colcontrol>
<input id=v02 type=radio name=colcontrol>
<input id=v03 type=radio name=colcontrol>
<input id=v04 type=radio name=colcontrol>
<input id=v05 type=radio name=colcontrol>
<input id=v06 type=radio name=colcontrol>
<input id=v07 type=radio name=colcontrol>
<input id=v08 type=radio name=colcontrol>
<input id=v09 type=radio name=colcontrol>
<input id=v10 type=radio name=colcontrol>
<input id=v11 type=radio name=colcontrol>
<input id=v12 type=radio name=colcontrol>

<table>
 <caption>First example table</caption>
 <col>
 <col class="v12 v11 v10 v09 v08 v07 v06 v05 v04 v03 v02">
 <col class="v12 v11 v10 v09 v08 v07 v06 v05 v04 v03">
 <col class="v12 v11 v10 v09 v08 v07 v06 v05 v04">
 <col class="v12 v11 v10 v09 v08 v07 v06 v05">
 <col class="v12 v11 v10 v09 v08 v07 v06">
 <col class="v12 v11 v10 v09 v08 v07">
 <col class="v12 v11 v10 v09 v08">
 <col class="v12 v11 v10 v09">
 <col class="v12 v11 v10">
 <col class="v12 v11">
 <col class="v12">
 <col>
 <col>
 <thead>
  <tr>
   <th><label for=v01>Item</label>
   <th>Jan
   <th><label for=v02>Feb</label>
   <th><label for=v03>Mar</label>
   <th><label for=v04>Apr</label>
   <th><label for=v05>May</label>
   <th><label for=v06>Jun</label>
   <th><label for=v07>Jul</label>
   <th><label for=v08>Aug</label>
   <th><label for=v09>Sep</label>
   <th><label for=v10>Oct</label>
   <th><label for=v11>Nov</label>
   <th><label for=v12>Dec</label>
 <tbody>
  ...
<table>
Bert Bos, coordinateur de l'activité style
Copyright © 1994–2023 W3C® Privacy policy

Created 17 Jan 2017;
Last updated lun. 11 sept. 2023 17:40:36

Langues

À propos des traductions