Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Afficher un tableau horizontal en tableau vertical "responsive design"


Sujet :

Responsive design en CSS

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    octobre 2015
    Messages
    50
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Analyste d'exploitation

    Informations forums :
    Inscription : octobre 2015
    Messages : 50
    Points : 30
    Points
    30
    Par défaut Afficher un tableau horizontal en tableau vertical "responsive design"
    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+

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 015
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 015
    Points : 32 807
    Points
    32 807
    Par défaut
    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é ! :

    (Waouh ! 2014... J'ai encore une bonne mémoire... )
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    DMC
    DMC est déconnecté
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2002
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : avril 2002
    Messages : 25
    Points : 39
    Points
    39
    Par défaut
    Bonjour theoask,

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

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 932
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 932
    Points : 34 200
    Points
    34 200
    Par défaut
    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.

Discussions similaires

  1. Transposer un tableau vertical variable en tableau horizontal fixe.
    Par RastaBomboclat dans le forum Macros et VBA Excel
    Réponses: 35
    Dernier message: 17/01/2016, 20h28
  2. Transformer tableau vertical en tableau horizontal
    Par misterlagaffe dans le forum IHM
    Réponses: 7
    Dernier message: 06/08/2014, 13h36
  3. Modifier mon tableau vertical/horizontal
    Par nova313 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/12/2008, 22h27
  4. tableau vertical alors qu'on le veut horizontal
    Par schats dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 04/10/2007, 15h50
  5. AFFICHER UN TABLEAU DYNAMIQUE
    Par ghassenus dans le forum Langage
    Réponses: 2
    Dernier message: 28/12/2002, 15h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo