[Résolu] Marges sur tr dans un table

Bonjour,

Voir le problème avec ce lien.

En haut de page, Produits très proches (4 lignes) et le fil d’Ariane (4 lignes), il y a bien un décalage vers la droite des lignes du tableau à partir de la ligne 2 mais ce décalage n'est pas de 25px comme demandé.

table.ore tr {border-left: 25px solid transparent}
table.ore thead tr {border-left-width: 0}

Même chose si vous diminuez la fenêtre pour voir la version petit écran.

Étrange, non ?
Modifié par boteha_2 (26 Dec 2017 - 19:21)

Tu ne peux pas mettre de margin sur une TR, mais tu mettre un padding sur un TD

Bonjour,

Bien sûr mais l'effet n'est pas le même.

Avec un padding sur TD la border-bottom va faire toute la largeur de la cellule.

Avec une pseudo-marge sur TR le décalage s'applique aussi à border-bottom.

Tu me fais penser que je peux essayer une pseudo marge sur TD mais je pense l'avoir déjà fait avec le même problème de non-respect de la largeur demandé.

table.ore tr td:first-child {border-left: 25px solid transparent}
table.ore thead tr td:first-child {border-left-width: 0}

j'essaye dès que j'ai le temps, je te tiens informé.
Modifié par boteha_2 (28 Dec 2017 - 12:23)

Bonjour,

Essaie le code suivant qui peut aider à comprendre le pourquoi de ce décalage bizarre (dû au fait que les coins des borders se rejoignent en diagonale) !

td {border-bottom: 20px solid blue;}
td {border-left: 50px solid red;}

EDIT: par contre, je ne vois pas de décalage du tout en mettant tr {border-left: 50px solid red;} au lieu de td {border-left: 50px solid red;}

Amicalement,
Modifié par parsimonhi (28 Dec 2017 - 13:00)

Bonjour,

Je m'en occupe ce soir.

Merci d'avance.

Bonjour,

gcyrillus a écrit :
Bonjour,
Le pseudo n'est pas une mauvaise idée ici, et tu peut te servir de tbody comme selecteur
(tbody est généré par le navigateur quand absent dans le code)

j'ai essayé différents sélecteurs et différentes propriétés avec toujours le même problème.

Je publie au plus vite quelques pages de test, ce sera plus clair.

Bonjour,

Test avec décalage général

On obtient bien l'effet de marge recherché avec ces simples déclarations :

table.ore td {border-bottom: 3px solid blue}
table.ore tr {border-left: 25px solid red}

A noter que IE prolonge la bordure bleue sur la bordure rouge.
Mais Firefox ou Chrome font bien ce que l'on recherche.

Maintenant j'ajoute la déclaration pour que la première ligne ne soit pas décalée :

table.ore thead tr {border-left-width: 0}

Test avec décalage sauf ligne un

Et là l'effet est surprenant, la bordure de 25px continue à exister mais elle sort du container vers la gauche.
Ce qui donne l'impression que la bordure est plus étroite quand elle est blanche ou transparente.

J'ajoute une bordure à la table :

table.ore {border: 1px solid green}

Et l'on voit bien que la border-left est chassée hors du container...

Test avec décalage sauf ligne un et bordure générale

Remplacer la bordure sur TR par une bordure sur le premier TD aboutit au même résultat. La première ligne étant TH elle n'est pas affectée par cette déclaration.

table.ore tr td:first-child {border-left: 25px solid red}

Test avec bordure du td:first-child

Je précise qu'aucune dimension n'est donnée pour le tableau ou ses éléments.
La taille du tableau ne dépend que de la taille du contenu.

Je ne comprends rien à ce comportement des navigateurs...
Modifié par boteha_2 (28 Dec 2017 - 21:54)

Bonjour parsimonhi,

Merci de ta suggestion.

Je vais essayer ce soir.

Je n'y crois pas trop car j'ai le même problème sans employer de bordure pour mes pseudo-marges, par exemple avec ce code j'ai les mêmes problèmes :

tr::before {content: ""; display: block; width: 25px}

Je passe à la réponse de gcyrillus

gcyrillus a écrit :
Je ne suis pas sur de comprendre le probleme finalement.

le pseudo en table-cell et un colspan incrementer de 1 fonctionne(pour faire dans le compliqué), ou un padding (pour faire dans le simple css 1.0)

Les 2 exemples en reprenant ton code en ligne , moins les bordures et fond rouges redessinés avec un fond.

https://codepen.io/anon/pen/rpmLVw

Est ce l'effet visuel rechercher ?

padding sur TD n'est pas possible, j'ai déjà expliqué pourquoi : la border-bottom doit être décalée comme le texte.

Ta démo donne l'effet recherché.

la clé de ton code est cette déclaration ?

pseudo tbody tr:before {
  content: "";
  width: 37px;
  display: table-cell;
}

display: table-cell pose un problème car si tu diminues la taille de la fenêtre ta cellule de 37px va diminuer de largeur même si table est white-space: nowrap.
je perds l'effet de marge cherché.

je propose donc une légère variante avec :

table.ore tr::before {content: ""; display: block; width: 25px; height: 5px; background-color: red}

height: 5px; background-color: red ont pour seul objet de mieux visualiser.

Tout va bien.

Maintenant j'ajoute la ligne qui empêche le décalage de la ligne de titre :

table.ore thead tr::before {content: none}

Et là, nouvelle surprise, tout va bien sur le premier table mais tout va mal sur le deuxième.
Modifié par boteha_2 (29 Dec 2017 - 22:12)

boteha_2 a écrit :
La page est déjà border-collapse:collapse par le reset css initial

J'avais vu ça (alors que dans mon test, je n'en avais pas), et c'est comme ça que j'ai compris que border-collapse:collapse générait une différence.

boteha_2 a écrit :
Dans cet exemple avec border-collapse: collapse, rien n'est changé.

Si je mets border-collapse: separate, nouvelle surprise, les border-left sur TR disparaissent.

Cela semble montrer que les bordures sur TR sont mal prises en charge, non ?

Quand il y a un border-collapse:collapse, il me semble que les navigateurs essaient de faire une sorte de moyenne des largeurs des bordures, et ils décalent d'un côté ou de l'autre pour aligner tout le monde quand les différents éléments à aligner n'ont pas la même largeur de bordure. Il me semble de plus que le bord gauche de la première ligne est toujours placé au même endroit.

Dans ton cas (cas d'un border-left donc avec pas de bordure en première ligne et des bordures de 50px sur les lignes suivantes), le bord de la première ligne est placé à un endroit raisonnable , puis le milieu des bordures des lignes suivantes est aligné avec le bord de la première ligne, d'où un décalage apparent vers la gauche de 25px.

Ceci me semble visible dans le fiddle https://jsfiddle.net/ke2vbx2o/ que j'ai déjà indiqué dans un post précédent.

Eventuellement on peut tenter de lire https://www.w3.org/TR/CSS2/tables.html#borders pour vraiment comprendre dans le détail (je n'ai pas réussi à lire jusqu'au bout).

EDIT: pour la question des borders des TR quand on a border-collapse:separate; la spec dit : "17.6.1 The separated borders model ... Rows, columns, row groups, and column groups cannot have borders".

Amicalement,
Modifié par parsimonhi (29 Dec 2017 - 23:49)

Bonsoir, si le pseudo donne l'effet rechercher et qu'il ne doit pas changer de taille, alors un padding au lieu d'un width sera incompressible.

exemple https://codepen.io/anon/pen/wpdPRW .

Ces pseudo peuvent aussi être des cellules vide auxquelles tu peut enlever, faire un reset sur les style avec td:empty. ou tbody td:first-child . Il faut simplement penser à adapter la valeur de colspan aux th de thead.

Les tableaux sont des éléments qui se redimensionnent en fonction de leur contenu et sont pour le coup flexible. En Insérant une marge interne , ou un autre élément de taille fixe dans une cellule, ils pourront avoir une taille minimale. Pour gérer des largeurs fixes, il faut voir avec table-layout:fixed;. L'idée des bordures transparentes n'est pas une bonne idée si elle est contigu avec une autre, elles se partagent l'angle ou elles se touchent. A mon sens une mauvaise idée.

Pour les hauteurs les tableaux s'adaptent sauf si un reset sur display.
Faire un reset sur display détruit la caractéristique d'affichage du tableau et retire l’élément(ou les éléments) du système ligne/colonne (rowspan et colspan sont aussi alors ignorés). A mon sens une mauvaise idée.

Bonnes fêtes

Cdt,

Bonjour,

parsimonhi a écrit :

EDIT: pour la question des borders des TR quand on a border-collapse:separate; la spec dit : "17.6.1 The separated borders model ... Rows, columns, row groups, and column groups cannot have borders".

Je pense que tout est dit.

collapse n'est pas adapté et separate empêche les bordures sur TR.

border-left n'est donc pas la propriété adaptée à mon problème.

MERCI beaucoup à parsimonhi pour ses recherches.

Je vais me concentrer sur ::before avec un display: border-cell et padding: 25px, comme proposé par gcyrillus.

Si pas possible je vais tout bêtement ajouter une colonne vide de largeur 25px et modifier le colspan de la ligne de titre, comme proposé par gcyrillus..
Pas très élégant, un peu galère de modifier la structure HTML par le script PHP, mais ce devrait être une solution comprise par tous les navigateurs.

Je reviens après mes tests.

boteha_2 a écrit :


Mais nouvelle déception sur ma page.

Dans le deuxième tableau la largeur de la cellule générée est celle du premier item de titre.
J'ai fait exprès de transformer "Rayons" en "Rayons ou sous-rayons" pour que ce soit clair.

Le résultat est le même avec display: block

J'ai évoqué à chaque fois la nécessité de mettre à jour le colspan de la première cellule de theader en l’incrémentant de 1 .
Là il est manquant et devrais être egal à 2 (1 par défaut + 1 = 2)
le pseudo genere une nouvelle cellule, donc une nouvelle colonne.

<table class="ore" summary="orientation" id="ore" cellspacing="0">
<thead>
  <tr>
    <th class="ry" colspan="2">Rayons ou sous-rayons</th>
    <th class="cu">Supports</th>
    <th>Espaces</th>
    <th>Étages</th>
   </tr>
 </thead>
 <tbody>
   <tr>
    <td class="ry">
..etc .....
    Audio-Vidéo, Téléphonie</td>
</tr>
</tbody></table>

à l'an prochain .

Cdt