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)

.article293 th:first-child {
width: 15%;
}
.article293 th:nth-child(2){
width: 20%;
} 

et dans l’article

||Mon tableau|||
|{{Colonne 1}}|{{Colonne 2}}|{{Colonne 3}}|
|Texte 1-1|Texte 2-1|Texte 3-1|
|Texte 1-2|Texte 2-2|Texte 3-2|

donne

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 :

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

et pour cibler un article XX précis

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

Et si vous voulez jouer avec les lignes du tableau :

Ligne d’entête

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

Lignes impaires

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

Lignes paires

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

Faire un tableau "transparent"

Il peut être intéressant, pour certains tableaux, de n’avoir ni fond, ni bords visibles. Comme par exemple pour aligner 3 images horizontalement.

Voilà comment procéder.

Dans l’article, on va mettre le tableau dans une "div" comme dans cet exemple :

<div class="tableau-transparent">
 
|{{Colonne 1}}|{{Colonne 2}}|
|texte |là aussi|
|encore|et toujours|
 
</div>

Ensuite, dans le fichier perso.css on va rajouter ceci :

/* Pour faire des tableaux transparents */
.tableau-transparent th, 
.tableau-transparent td, 
.tableau-transparent tr{
	background-color: transparent !important ;
	border-color: transparent !important ;
}

Résultat avec la div :

Résultat sans la div  :