[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)

Bonjour gcyrillus,

Je teste demain, encore merci.

Je te tiens informé.

Bonjour gcyrillus,

J'ai testé ton code dans la vie réelle et le résultat est juste saisissant : le résultat est exactement celui voulu.

Je n'aurais pas pensé à rendre toutes les cellules d'un tableau flottantes, encore merci.

Juste une remarque pour notre gouverne, en quoi tes sélecteurs sophistiqués sont-ils nécessaires ?

table td {float: left}
table tr td:first-child , table tr td:last-child {clear: left}

N'est-ce pas strictement équivalent ?

Je ne comprends pas bien ton commentaire dans le codepen :

/*:first-of-type ... parceque la un devrait ressembler a la deux si possible et float, pour les mettre side by side*/

Bonjour,

Encore merci, c'est parfait.
En plus on peut être sûr que ce code fonctionne pour tous les navigateurs qui comprennent les media-queries, j'ai testé sur IE.

Autrement, j'utilise comme breaking points :

768px (on va dire pour les tablettes)
480px (on va dire pour les smartphone)

As-tu un avis sur le sujet ?

PS : j'attends un peu avant de cocher Résolu.

Mon avis, c'est que sur smartphone, on a généralement des navigateur récent par la force des choses, pour les tablettes , c'est aussi relativement récent dans l'ensemble , donc pas d’inquiétude pour ce que est des mediaqueries.

float n'est vraiment pas nouveau et devrais avoir le même comportement partout. Sauf bug d'un navigateur qui déciderais que <tr> ai soudain un contexte de formatage, peu probable .

Cdt,

<edit> Cependant, à l'affichage toute les caractéristiques d'un tableau sont perdues.
Modifié par gcyrillus (18 Aug 2019 - 13:43)

donc tout va bien

OUI.

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