Tableau html responsive

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 6 Novembre 2017.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    642
    J'aime reçus:
    2
    Salut à tous,

    J'ai pas mal de tableaux html sur mon site, dont certains ont une dizaine de colonnes, et je suis entrain de voir la meilleure solution pour que ces tableaux html soient responsive.

    J'ai vu cette solution avec des <div> avec overflow-x:auto mais je me demandais si les utilisateurs de smartphones et tablettes pensent à utiliser les barres de défilement horizontales pour visualiser les parties du tableau html qui ne sont pas visibles ?

    Sinon, quelles autres solutions me conseillez-vous pour rendre mes tableaux html responsive ?

    Merci pour vos réponses.
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 735
    J'aime reçus:
    233
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    642
    J'aime reçus:
    2
    Merci spout, je vais regarder ces 3 techniques.

    Pour infos, j'ai regardé l'un de mes principaux concurrents et ils utilisent la technique de la <div> avec overflow-x:auto
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 735
    J'aime reçus:
    233
    Bootstrap 3 et 4 utilisent cette même technique (overflow).
     
  5. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 063
    J'aime reçus:
    109
    Je pense qu'un tableau au-delà de 3 ou 4 colonnes n'est plus dans l'esprit mobile. Il faut que tout rentre sans scroller horizontalement. Si on veut plus d'infos, l'utilisateur clique sur la ligne.

    Et parler de tableau responsive quand il faut scroller comme https://www.w3schools.com/howto/howto_css_table_responsive.asp pour moi c'est au contraire non-responsive !
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 735
    J'aime reçus:
    233
  7. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    642
    J'aime reçus:
    2
    C'est vrai que la technique du DataTables est alêchante :D mais cela fait inclure dans le code html 4 fichiers supplémentaires (2 css + 2 JavaScripts)... contre une simple <div style="overflow-x:auto;"></div> avec la méthode w3schools.com, j'hésite...

    D'autant plus que je souhaite pouvoir cliquer sur les lignes de mon tableau html afin d'ouvrir sous cette ligne une <div> (ou une autre ligne <tr> qui était en display:none) dans laquelle s'affichera le détail des infos de ce produit.... est-ce réalisable via DataTables ?
     
  8. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 735
    J'aime reçus:
    233
  9. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    642
    J'aime reçus:
    2
    Merci spout, je vais opter pour la méthode de la <div style="overflow-x:auto;"></div>.

    Je voudrais lorsqu'on clique sur une ligne de mon tableau html qu'une nouvelle ligne s'affiche en dessous, j'ai trouvé le code javascript ci-dessous qui fonctionne parfaitement bien :
    Code:
    function toggleSibling(sibling){
        sibling = sibling.nextSibling;
        while(!/tr/i.test(sibling.nodeName)){
          sibling = sibling.nextSibling;
        }
        sibling.style.display = sibling.style.display == 'table-row' ? 'none' : 'table-row';
    }
    
    On ajoute dans le code html du tableau cette nouvelle ligne ci-dessous en "display:none" grace à la class css "extra-line-table" :
    Code:
        <tr class="extra-line-table">
            <td colspan="12">Infos sur le produit</td>
        </tr>
    
    Je voudrais afficher à gauche de chaque ligne de mon tableau une image "+" et "-" qui se trouverai dans la première cellule <td></td> de mon tableau.

    L'image "+" est affichée au chargement du tableau et lorsque l'utilisateur clique sur une ligne le "+" se change en "-" et vice et versa, comment faire ces 2 actions en même temps : ouverture de la nouvelle ligne <tr class="extra-line-table"> + changement de l'image "+" par l'image "-" sur onclick de la ligne <tr> du produit ?
     
  10. gotgot
    gotgot WRInaute discret
    Inscrit:
    1 Octobre 2014
    Messages:
    188
    J'aime reçus:
    0
    suffit de mettre ton code dans la même fonction qui appelle le onclick, ou d'appeler une deuxième fonction dans celle du onclick
     
Chargement...
Similar Threads - Tableau responsive Forum Date
Afficher/cacher données dans un tableau Développement d'un site Web ou d'une appli mobile 9 Mars 2019
Tri tableau array en PHP Développement d'un site Web ou d'une appli mobile 26 Février 2019
créer un site qui regroupe les tableaux de bords personnalisés GA de mes sites web Google Analytics 13 Juin 2018
voir mon tableau de bord personnalisé google analytics dans l'appli mobile Google Analytics 7 Juin 2018
Tronquer un tableau array Développement d'un site Web ou d'une appli mobile 27 Novembre 2017
Exécution requête sur bouton sur une ligne tableau Administration d'un site Web 5 Juillet 2017
Affichage dynamique d'un tableau en css Développement d'un site Web ou d'une appli mobile 1 Juin 2017
Export tableau de bord Google Analytics Google Analytics 2 Mai 2017
Tableau de bord Analytics : quels KPI indispensables pour un site B2B Google Analytics 4 Avril 2017
Problème pour passer un tableau en paramètre d'une requêtet SELECT. Développement d'un site Web ou d'une appli mobile 24 Mars 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice