Règles CSS complètes

Retourner au contenu associé (entrée du suivi : Améliorer l'affichage des tableaux)

# Règles CSS complètes

Posté par Adrien Dorsaz (site web personnel, Mastodon) le 13 février 2022 à 07:27. En réponse à l’entrée du suivi Améliorer l'affichage des tableaux. Évalué à 3 (+0/-0). Dernière modification le 13 février 2022 à 07:27.
Je viens de voir que cette idée vient de la difficulté de lire les tableaux dans ce journal.

Un code complet CSS pour tester, c'est:
```
table {
 border-collapse: collapse;
}
table td {
 padding: 5px;
}
table tr {
 border-bottom: thin solid;
 border-top: thin solid;
}
table tr:hover {
 background: #f1f1f1;
}
```
J'ai dû ajouter la règle border-collapse sur table, si non, la règle sur les border de tr n'avait aucun effet.

Quand j'ajoute cette règle, on perd l'espacement qui existait entre les cellules, c'est pour ça que j'ai rajouté aussi un padding sur les td.

Je trouve que ça donne bien dans le journal cité plus haut.

Il faut que je prenne le temps de tester cette idée sur plus de contenu.

En particulier celui du "hack" des tableaux pour afficher les logos des éditions dans les journaux des contenus LinuxFr récompensés par des livres.
Répondre