IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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
    52
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Analyste d'exploitation

    Informations forums :
    Inscription : Octobre 2015
    Messages : 52
    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
    Invité
    Invité(e)
    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... )
    Dernière modification par Invité ; 03/06/2019 à 19h36.

  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
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    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