1397 sujets

Web Mobile et responsive web design

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.
Modérateur
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 Smiley cligne , ç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,

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.
Modérateur
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)
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)