1485 sujets

Web Mobile et responsive web design

[Résolu] Comment gérer les données tabulaires sur smartphone ?

Bonjour,
je cherche une solution pour gérer l'affichage des tableaux sur smartphone.

Je m'occupe de ce site dont l'affichage repose sur l'utilisation de Mediaqueries.

L'affichage est correct sur smartphone sauf pour les tableaux dont le nombre de colonnes peut varier et donc le rendre "physiquement" trop large. Voici un exemple.

La seule technique que je connaisse consiste à passer le display des cellules qui dépassent en display:none. Mais cette dégradation gracieuse ne me convient pas. Dans la mesure où les navigateurs sur smartphone nous permettent plein de possibilités, il doit bien y avoir des solutions ?

Mon souhait serait d'émanciper les cellules des lignes afin de leur donner un flux continu (j'ai pas dit float hein...)

Merci d'avance pour votre aide.
Olivier
Salut,

ah les données tabulaires & les media-queries, quelle plaie.

Premier point, regarde bien ton style :

article caption {
width: 620px;
}

Ensuite, as-tu testé de changer le display de tous les éléments du tableau :
tr => block
td => inline...

Ça peut t'aider mais c'est très sale.

Tu peux aussi fixer la taille de tes td en css, puis celle de tes images... afin qu'aucune cellule ne soit plus large que 25%.

Sinon tu as d'autres propriétés CSS3 mais tout dépend jusqu'à quel navigateur tu assures la compatibilité Smiley cligne

Tiens nous au courant.
Modifié par Julien Optea (11 Jul 2012 - 16:02)
Merci, ça s'approche de ce que je cherche à faire. Il faut que je réfléchisse à d'autres cas où les tableaux seront plus complexes... Je reviendrais faire mes retours.
Salut,

Je ne sais pas si ça pourra t'aider, mais j'ai eu un peu le même genre de soucis, résolu ici.

Le but est de créer les tables en colonnes et donc ne mettre qu'une cellule par <tr> et appliquer un style inline-block aux tables.

Le Javascript sert pour le cas de tableau avec des cellules entêtes, afin de les répéter en cas de retour à la ligne.
Probablement que tu n'as besoin d'un tel code.

L'avantage d'un système de gestion par colonne, est qu'il ne nécessite pas de media queries.
Sur wikipedia, il y a un overflow qui permet de faire défiler horizontalement le contenu tableau. Smiley smile

Je ferai un test demain.
Modérateur
En même temps, le tableau cité en exemple, ce n'est pas des données tabulaires, mais une liste de lien présentés sur une grille. C'est au contraire plutôt logique de passer les td en display: block et float: left; car on s'en contrefiche de l'ordre des colonnes et des lignes... Sinon pour des vrais tableau de données, et bien l'overflow est une solution (la seule?).

a écrit :
Le but est de créer les tables en colonnes et donc ne mettre qu'une cellule par <tr> et appliquer un style inline-block aux tables.

Allez avec un best of pour celle-là, ce qui donne:

<style>
table td { display: table; }
table table td { display: table-row; }
table table table td { display: table-cell; }
</style>
<table><tr><td>
  <table><tr><td>
    <table><tr><td>cel1.1</td></tr></table><table><tr><td>cel2.1</td></tr></table>
  </td></tr></table>
  <table><tr><td>
    <table><tr><td>cel1.2</td></tr></table><table><tr><td>cel2.2</td></tr></table>
  </td></tr></table>
</td></tr></table>

Smiley lol Smiley lol Smiley lol
edit: tout compte fait ça doit pas marcher mon truc, je vais tester………
Modifié par kustolovic (12 Jul 2012 - 23:37)
Julien Optea :

En effet, j'ai effectivement un problème dans ma déclaration précédente à régler Smiley cligne


SuperMerguez :
Merci infiniment ! C'est parfait, mis à part le contenu dupliqué via CSS... Au moins j'ai une bonne base.


kustolovic :
Tout à fait d'accord, il ne s'agit pas vraiment de données tabulaires dans ce cas précis. Je vais taper sur les doigts du producteur de contenu Smiley cligne
Modifié par olivier56 (13 Jul 2012 - 10:04)
Pour info, ce code fonctionne (merci wikipedia) :

	table {
	 	display: block;
	 	-webkit-overflow-x: auto;
	 	-moz-overflow-x: auto;
	 	-o-overflow-x: auto;
	 	overflow-x: auto;
	}


Problème, le tableau n'est plus reconnu comme tel par VoiceOver (mais ça doit être la même chose avec d'autres lecteur d'écran). Il faut utiliser un élément englobant et appliquer l'overflow sur celui-ci plutôt que sur le tableau.
Modifié par Patidou (13 Jul 2012 - 14:10)
Sujet clos
Aller à