Discussion :

[Theoask]

Bonjour,,

Voici mon code HTML pour un tableau simple

https://codepen.io/theoask/pen/RmvYeL


Je voudrais ca comme résultat


TecTake

Taille conseillée 180 cm
Réglage Taille : Oui
Armature : Plastique


Intimate

Taillé conseillée 175 cm
Réglage Taille : Non
Armature : Métal



En fait les éléments s’empilent les uns en-dessous des autres sur un écran de smartphone depuis un tableau horizontal

Je me casse la tête à trouver ça en CSS. Je sais qu'un webmaster y arrive sur la version mobile du tableau en page d'accueil ici: https://www.chaise-gamer.fr/

Je crois qu’il faut utiliser display :flex ou flex :wrap ou bien display :block avec les media queries, mais je ne trouve pas le bon réglage.

J'ai pensé à th,tr,td:not(:first-child) aussi mais ça ne marche pas.

Pourtant j'ai appliqué le tutoriel CSS ici mais ça ne marche toujours pas...https://css-tricks.com/responsive-data-tables/


A+

[Invité]

Bonjour,


Sur le site que tu montres, ça se passe en JS.

à vue de nez... DEUX tableaux.

• DESKTOP : on affiche la <table> (horizontale)
• PHONE : on affiche en vertical.

DEUX <div> : display: block/none (en fonction de la largeur d'affichage)

N.B. J'ai déjà vu ça en CSS/JS avec UNE SEULE TABLE *... (mais je ne me souviens plus où...)
* il fallait indiquer des classes CSS à chaque <td>/<th>

[EDIT] (re)Trouvé ! :

• Une technique simple et accessible pour des tableaux responsive
• (exemple)

(Waouh ! 2014... J'ai encore une bonne mémoire... )

[DMC]

Bonjour theoask,

Un exemple sans Js :
https://codepen.io/Zonecss/pen/EBPEZw

[NoSmoking]

Bonjour,
@DMC :
la solution de SylvainPV n'utilise le JavaScript pour mettre les attributs aux balises afin d'éviter d'avoir à le faire à la main.

Ta solution est intéressant dommage que le HTML utilisé ne soit pas conforme.