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.

Utilisé à ce jour dans 1327 sites
Jouer avec les tableaux
Article mis en ligne le 9 novembre 2016
dernière modification le 3 février 2017

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

 Jouer avec les largeurs de colonnes

Par défaut, les colonnes d’un tableau sont de la même largeur.
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


Forum
Répondre à cet article
Jouer avec les couleurs des colonnes d’un tableau
christian - le 3 février 2017

Bonjour.

avec cette méthode est il possible de rendre blanches toutes les colonnes d’un tableau ?

Merci d’avance

Christian

Jouer avec les couleurs des colonnes d’un tableau
Jean Christophe Villeneuve - le 3 février 2017

Oui, bien sur, avec même un bord de cellule noir par exemple

  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

Jouer avec les couleurs des colonnes d’un tableau
christian - le 3 février 2017

Bonjour,

C est géant ! Grand merci
Tu devrais le rajouter dans les trucs et astuces.
C est vraiment pratique et utile.

Jouer avec les couleurs des colonnes d’un tableau
Jean Christophe Villeneuve - le 3 février 2017

Bonne idée !

Du coup, j’ai modifié cet article.



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

RSS Valid XHTML 1.0 Strict

2009-2017 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.10