Suivi — Feuilles de style (CSS) Améliorer l'affichage des tableaux

#2023 Posté par Gil Cot ✔ (site web personnel, Mastodon) le 10 février 2022 à 21:27. État de l’entrée : ouverte. Licence CC By‑SA.

Étiquettes : aucune

fév.

2022

Les tableaux dans les journaux et dépêches sont un peu difficiles à lire. Une première amélioration serait de permettre de distinguer les rangées par l'ajout d'une ligne discrète en dessous.

table tr {
  border-bottom: thin solid;
}

Pour les longs/larges/gros tableaux, il est aussi intéressant de signaler la ligne survolée

table tr:hover {  
  background: #f1f1f1;
}

# Règles CSS complètes

Posté par Adrien Dorsaz (site web personnel, Mastodon) le 13 février 2022 à 07:27. É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
- [^] # Re: Règles CSS complètes
  
  Posté par Gil Cot ✔ (site web personnel, Mastodon) le 15 février 2022 à 08:37. Évalué à 2 (+0/-0).
  
  Top.
  Je pensais que ça collapse déjà, raison pour laquelle je ne l'ai pas ajouté. Et pour le border-top je me suis dit que l'entête était traité séparément (et peut se suffire en gras.)
  Par contre, j'ai toujours du mal avec les valeurs rigides comme 5px ; je préfère quelque chose comme .7em (adapter la proportion qui va bien.) Dans les deux cas, faut voir comment ça se comporte en zoomant sur le texte (entre la réduction de moitié et le grossissement en triplant.)
  
  “It is seldom that liberty of any kind is lost all at once.” ― David Hume
  
  Répondre
- [^] # Re: Règles CSS complètes
  
  Posté par Gil Cot ✔ (site web personnel, Mastodon) le 15 février 2022 à 08:58. Évalué à 2 (+0/-0).
  
  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.
  
  Je viens d'aller voir le dernier en date… C'est marrant, les zimage sont dans le thead et le tbody est constitué de cellules vides : j'aurais fait l'inverse (mais dans les deux cas, j'ai toujours trouvé cette contrainte de ligne d'en-tête pour les tableaux un peu moisie.)
  
  “It is seldom that liberty of any kind is lost all at once.” ― David Hume
  
  Répondre
  - [^] # Re: Règles CSS complètes
    
    Posté par Gil Cot ✔ (site web personnel, Mastodon) le 11 mars 2022 à 05:04. Évalué à 2 (+0/-0).
    Bon, je pense qu'on peut limiter la casse en se concentrant sur le corps du tableau
```
table {
  border-collapse: collapse;
}
table td {
  padding: 5px;
}
table tbody tr {
  border-bottom: thin solid;
}
table tbody tr:hover {
  background: #f1f1f1;
}
```
    On aura du coup un filet (et non deux bandes) sous les images des couvertures. Qu'en penses-tu ?
    
    “It is seldom that liberty of any kind is lost all at once.” ― David Hume
    Répondre
    - [^] # Re: Règles CSS complètes
      
      Posté par Gil Cot ✔ (site web personnel, Mastodon) le 12 juillet 2022 à 23:34. Évalué à 2 (+0/-0).
      J'ai pu tester en live en tél´versant un bout de css depuis la page de gestion de style. Je trouve que le petit filet en bas n'est pas gênant en soi (ni disgracieux ni utile)
      
      Cependant, j'ai pensé qu'on peut parfaire la chose en faisant recours au sélecteur :last-child et à la propriété empty-cells ainsi :
      
      table tbody tr { border-bottom: thin solid; } table tbody tr:last-child { empty-cells: hide; }
      
      …mais ça ne semblait pas fonctionner jusqu'à ce que j'aille regarder le HTML généré pour me rendre compte que les cellules vides ont toujours au moins un   (et donc ne sont pas vides.) Tant pis.
      
      “It is seldom that liberty of any kind is lost all at once.” ― David Hume
      Répondre

# styles concernés ou pas

Posté par Gil Cot ✔ (site web personnel, Mastodon) le 12 décembre 2023 à 12:28. Évalué à 3 (+0/-0).

Suite au commentaire de mousquetaire G2, j’ai pris conscience qu’il y a déjà des gens pour qui les tableaux ont une grille …y compris les annonces de Florent.

J’ai donc fait le tour et je remarque que quand il y a la grille elle est totale (tous les bords), pas juste les lignes (comme je le propose) ou juste les colonnes. J’ai noté aussi qu’aucune ne fait l’alternance de couleur de lignes (comme je le propose) ou de colonne, et que certains on la ligne de titres (entête) colorée différemment du reste.

style	grille	entête
CSS par défaut	non	non
RonRonnement-Bordeau	non	non
RonRonnement-Classic	non	non
RonRonnement-Mauve	non	non
RonRonnement-Orange	non	non
RonRonnement-Rose	non	non
RonRonnement-Sepia	non	non
RonRonnement-Turquoise	non	non
RonRonnement-Vert	non	non
black_bling	oui	non
blue-smooth	non	oui
cascade	oui	oui
cascade-alternative	oui	oui
edition_papier	oui	non
grayscale	non	oui
grayscale-mobile	non	oui
grises	oui	oui
kaiska-new	oui	oui
kaiska-short	oui	oui
kitch	non	non
newton	non	non
nyghtgrey	non	oui
opensuse	oui	oui
plee_the_bear	non	non
retro	non	non
solarized_dark_dark_code	oui	oui
solarized_dark_light_code	oui	oui
solarized_light_dark_code	oui	oui
solarized_light_light_code	oui	oui
spacibo	oui	non
steelblue	oui	oui

P.S.1 : Tiens, j’aurais pu utilise les couleurs de RonRonnement pour mon dernier journal :)

P.S.2 : Il y en a qui ont des bordures englobant tout le tableau ; mais je n’ai pas pensé à créer une troisième colonne et j’ai la flemme de reprendre les tests.

“It is seldom that liberty of any kind is lost all at once.” ― David Hume

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.