[Résolu] Fusionner plusieurs cellules frères

Bonjour,

Ce sujet complètera cette discussion.

Nouveau problème un peu ardu dont je n'arrive pas à me sortir.

Mettons que j'ai un tableau de ce genre en 4 colonnes, les dimensions du tableau étant déterminées par le contenu.

<table>
<tr><td>Titre un</td><td>Icone_carré</td><td>Icone_rond</td><td>Description un</td></tr>
<tr><td>Titre deux</td><td>Icone_rond</td><td></td><td></td></tr>
<tr><td>Titre trois</td><td>Icone_carré</td><td></td><td>Description trois</td></tr>
</table>

Sur petit écran, j'aimerais obtenir un rendu équivalent à ce code :

<table>
<tr><td>Titre un <span>Icone_carré</span> <span>Icone_rond</span></td></tr>
<tr><td>Description un</td></tr>
<tr><td>Titre deux <span>Icone_rond</span></td></tr>
<tr><td>Titre trois <span>Icone_carré</span></td></tr>
<tr><td>Description trois</td></tr>
</table>

Autrement dit, on passe de 4 colonnes à 1 colonne.

Si les colonnes deux ou trois ne sont pas vides elles sont fusionnées avec la colonne un.
Si la volonne quatre n'est pas vide elle crée une nouvelle ligne.

Déplacer la colonne quatre je sais faire grâce à la précédente discussion.

Par contre fusionner les colonnes un à trois je ne vois pas comment faire.
J'ai ajouté des <span> pour rendre la lecture plus claire mais icone-carré et icone-rond sont des petites images (img).

Si nécessaire je peux changer la stucture en remplaçant la table pour une Div en display table.
S'il y a une solution en conservant la table je préfère.

Merci d'avance.

bonsoir,

rapidement et dans les idées évoquées précédemment:

table:first-of-type td {float:left;}
table:first-of-type td:nth-last-child(3n +1) {clear:left;}

serait une première approche/idée.

démos avec les deux exemples cote à cote : https://codepen.io/gc-nomade/pen/GRKqqKr


P.S. n’hésite pas à jouer avec des structure HTML simple et CSS (display et float pour ce qui est du visuel) pour mieux comprendre de visu ce qu'implique telle ou telle régle CSS et ses valeurs, de plus codepen te permet de le faire en live sans même sauvegarder tes bricoles , ça marche aussi pour debugger de simple javascript ou te familiariser avec bootstrap, less, jquery et aures, Cela peut aussi te servir de support de cours.
Modifié par gcyrillus (16 Aug 2019 - 21:53)

dans le codepen, il y a tes deux tableaux , il n'y a que le premier sur lequel les styles sont appliqués pour que le premier ressemble au second.

j'ai ajouté un color aux cellules flottantes pour que celà soit plus clair https://codepen.io/gc-nomade/pen/GRKqqKr .

++

gcyrillus a écrit :
Cependant, à l'affichage toute les caractéristiques d'un tableau sont perdues.

Comme le but est de passer sur une colonne on s'en fiche de perdre les caractéristiques du tableau. C'est même le but recherché car l'objet est de faire comme si les 3 premières cellules étaient fusionnées.

Par ailleurs les tr sont tous de même largeur qui est la largeur de la table.
Donc si besoin de border-top ou border-bottom de la même largeur il faut styler les tr au lieu des td. Et le résultat ressemble à un tableau.

Pour conserver un comportement de tableau il faudrait utiliser la solution de la discussion précédente avec display: contents et display : grid.
Modifié par boteha_2 (19 Aug 2019 - 18:59)

OUI.

J'ai coché Résolu.
Modifié par boteha_2 (24 Aug 2019 - 16:31)