Fusion de deux cellules td (avec GRID ?)

Bonjour,

Ce codepen illustre la question.

J'ai un tableau très simple.

En version petit écran je dois fusionner le contenu des cellules 1 et 2 de chaque ligne et passer la cellule 3 en dessous.

Avec GRID je passe bien la cellule 3 en dessous mais je ne vois pas comment comment fusionner les deux premières cellules.

Le codepen montre le tableau de départ, le visuel à atteindre et ce que j'arrive à faire avec GRID.

J'espère que c'est clair, à votre disposition si précisions nécessaires.

Bonsoir,

comme tu as 3 cellules, que tu veut fusionné les deux premières dans une grille en grid d'une colonne, le plus simple est de faire disparaître les deux premieres avec display:contents

#essai tr {
  display:grid;
  padding-top:.6em;
}

table#essai :is(tbody, td:nth-child(1),td:nth-child(2)) {
  display:contents;
}

On peut aussi retirer le tbody si présent ou inclus par le navigateur.

Fork de ton pen : https://codepen.io/gc-nomade/pen/RNNqVOr

cdt
Modifié par gcyrillus (11 May 2025 - 21:49)

Bonjour gcyrillus,

C'est bien l'effet voulu.

Merci beaucoup.