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 1564 sites
flècheAccueil flèche Astuces
logo article ou rubrique
Jouer avec les tableaux
Article mis en ligne le 9 novembre 2016
dernière modification le 3 février 2017

par Jean Christophe Villeneuve
Visites : 421 - Popularité :
2%
logo imprimer
Enregistrer au format PDF
article 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

Répondre à ce message
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

Répondre à ce message
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.

Répondre à ce message
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.

Répondre à ce message
Jouer avec les couleurs des colonnes d’un tableau
Sandy-Pascal - le 22 octobre 2017

Essayez

table.spip tr.row_odd.odd{
background-color: white;
}

et

table.spip tr.row_even.odd{
background-color: white;
}

Répondre à ce message
Jouer avec les couleurs des colonnes d’un tableau
Jean Christophe Villeneuve - le 22 octobre 2017

Pas bête mais là tu ne cibles pas la ligne de titre.

Répondre à ce message
Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

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