[Résolu] Marges sur tr dans un table

Bonjour,

Je rencontre un problème étrange.

<table>
<thead><tr><th colspan="2">Un petit tableau<th></tr></thead>
<tr><td>Cellule 2.1</td><td>Cellule 2.2</td><tr>
<tr><td>Cellule 3.1</td><td>Cellule 3.2</td><tr>
</table>

td {border-bottom: 3px solid #F2F2F2}

je veux décaler les lignes vers la droite, avec l'équivalent de
tr {margin-left: 50px}

Comme il n'y pas moyen d'appliquer une marge à un élément tr, j'emploie :
tr {border-left: 50px solid transparent}

On peut aussi employer un pseudo élément :: before mais une simple bordure transparente me semble plus simple.
Cela marche bien.

Maintenant je veux que le ligne de titre ne soit pas décalée, j'ajoute cette déclaration

thead tr {border-left-width: 0}

Et là surprise, le ligne de titre est bien sans bordure mais sur les deux lignes suivantes la bordure est diminué en gros de moitié.

Donc cette feuille de style

td {border-bottom: 3px solid #F2F2F2}
tr {border-left: 50px solid transparent}

Décalage de 50 px de toutes les lignes comme prévu

td {border-bottom: 3px solid #F2F2F2}
tr {border-left: 50px solid transparent}
thead tr {border-left-width: 0}

Décalage d'environ 25px des lignes 2 et 3, comprends pas.

j'ai essayé avec plusieurs navigateurs et l'effet est le même.

Le problème est le même tr::before {content: ""; width: 50px; display: block}
Modifié par boteha_2 (24 Dec 2017 - 16:10)

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)

tbody tr:before {
  content: "";
  display: table-cell;
  padding: 0 25px;/*ou width:50px; */
}

demo: https://codepen.io/anon/pen/EoWQxy

Bonjour,

Il est probable que "l'effet est surprenant" soit finalement dû au table {border-collapse:collapse;}.

Voici un jsfiddle https://jsfiddle.net/ke2vbx2o/ qui aide à mieux le voir.

Amicalement,

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 ?

J'avais évoquer un liste de définition en commentaire du HTML de mon précédent pen ... vu le second tableau cela n'a plus aucune pertinence .

Cdt
Modifié par gcyrillus (29 Dec 2017 - 20:19)

Bonjour,

Excusez-moi de vous ennuyer avec une question aussi tordue.
Peut-être un effet de bord quelque part dans mon code CSS.

parsimonhi a écrit :

Il est probable que "l'effet est surprenant" soit finalement dû au table {border-collapse:collapse;}.
Voici un jsfiddle https://jsfiddle.net/ke2vbx2o/ qui aide à mieux le voir.

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

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 ?

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)

Bonjour,

Nouveau test avec la piste de gcyrillus

tbody tr:before {
  content: "";
  padding-left: 25px;
  display: table-cell;
}

Parfait avec :

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

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

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

Bonjour,

gcyrillus a écrit :

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.

Je m'excuse...

En ajustant le colspan le résultat devient parfait.

tbody tr:before {
  content: "";
  padding-left: 25px;
  display: table-cell;
}

Je vais tester sur divers navigateurs avant de mettre en production. J'attends un peu avant de cocher Résolu.

Encore MERCI.