Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Utilisé à ce jour dans 449 sites
logo article ou rubrique
Jouer avec les tableaux
Article mis en ligne le 9 novembre 2016
dernière modification le 30 octobre 2018

par Jean Christophe Villeneuve

 Jouer avec les largeurs de colonnes

Par défaut, les colonnes d’un tableau s’adaptent à leurs contenus.
Mais on peut modifier ce comportement avec un peu de CSS à placer dans un fichier perso.css qui doit se trouver dans /squelettes/styles

Un exemple :

Un tableau à 3 colonnes de tailles différentes : on retaille la première et la deuxième avec ce code css dans perso.css
On ne modifie le tableau que pour cet article (le 293)

  1. .article293 th:first-child {
  2. width: 15%;
  3. }
  4. .article293 th:nth-child(2){
  5. width: 20%;
  6. }

Télécharger

et dans l’article

donne

Mon tableau
Colonne 1Colonne 2Colonne 3
Texte 1-1 Texte 2-1 Texte 3-1
Texte 1-2 Texte 2-2 Texte 3-2

 Jouer avec les couleurs

Les couleurs d’un tableau vous gênent ? Pas de souci, on peut les changer.

Un exemple pour avoir des tableaux blancs avec des bords de cases noirs :

  1. table.spip th, table.spip td{
  2. background-color: white;
  3. border: 1px solid black;
  4. }

Télécharger

et pour cibler un article XX précis

  1. .articleXX table.spip th, .articleXX table.spip td{
  2. background-color: white;
  3. border: 1px solid black;
  4. }

Télécharger

Et si vous voulez jouer avec les lignes du tableau :

Ligne d’entête

  1. table.spip tr.row_first{
  2. background-color: blue;
  3. }

Télécharger

Lignes impaires

  1. table.spip tr.row_odd.odd{
  2. background-color: blue;
  3. }

Télécharger

Lignes paires

  1. table.spip tr.row_even.even{
  2. background-color: blue;
  3. }

Télécharger

qrcode:http://escal.ac-lyon.fr/spip/spip.php?article293

Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2019 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.3.7