Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

Messages: 583

Enregistré le: 9 Fév 2004

Message le Lun Nov 06, 2017 15:27

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.
Haut
8 Réponses
Messages: 8616

Enregistré le: 14 Mai 2003

Message le Lun Nov 06, 2017 15:35

3 techniques ici: https://elvery.net/demo/responsive-tables/
Je préfère la technique "No More Tables"
Haut
Messages: 583

Enregistré le: 9 Fév 2004

Message le Lun Nov 06, 2017 17:41

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
Haut
Messages: 8616

Enregistré le: 14 Mai 2003

Message le Lun Nov 06, 2017 17:49

Bootstrap 3 et 4 utilisent cette même technique (overflow).
Haut
Messages: 529

Enregistré le: 23 Fév 2013

Message le Mar Nov 07, 2017 7:25

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 !
Haut
Messages: 8616

Enregistré le: 14 Mai 2003

Message le Mar Nov 07, 2017 8:24

rick38 a écrit:Si on veut plus d'infos, l'utilisateur clique sur la ligne.

+1 technique de DataTables: https://datatables.net/extensions/responsive/examples/initialisation/c ... sName.html
Haut
Messages: 583

Enregistré le: 9 Fév 2004

Message le Jeu Nov 16, 2017 14:05

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 ?
Haut
Messages: 8616

Enregistré le: 14 Mai 2003

Message le Jeu Nov 16, 2017 14:10

Oui: https://datatables.net/examples/server_side/row_details.html
Mais comme tu dis, c'est plutôt lourd.
Haut
Messages: 583

Enregistré le: 9 Fév 2004

Message le Jeu Nov 16, 2017 15:07

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: Tout sélectionner
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: Tout sélectionner
    <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 ?
Haut

Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.