[Réglé] Tableau illisible avec Responsive Tables

24 Jui 2017 15:31 - 30 Jui 2017 13:33 #1 par Louismarc
Bonjour,

je n'arrive pas à faire un tableau responsive avec Responsive Tables, mais je ne vois pas où je fais des erreurs. Il me semble que le mieux serait d'avoir un affichage sur deux colonnes qui se répèteraient, avec une colonne "prestations" et une autre pour le public concerné. Ca ferait "prestations/adultes", puis "prestations/enfants", etc. Si ça ne peut pas se faire, où si même comme ça c'est illisible, je suis à l'écoute des suggestions :-)
Merci d'avance à ceux qui pourront me donner un coup de main.

L'adresse est la suivante : www.ecuriesduroc.com/tarifs

Et le tableau concerné :

<table border="3" class="responsive rt" style="width: 918px; height: 483px; border-color: #263d67; float: left;" cellpadding="0">
<thead>
<tr>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;"></span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;"><strong>ADULTES</strong></span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;"><strong>ENFANTS*</strong></span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;"><strong>AVEC CHEVAL PERSONNEL</strong></span></td>
</tr>
</thead>
<tbody>
<tr>
<td><strong><span style="font-family: verdana, geneva; font-size: 12pt;">1 HEURE</span></strong></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">24 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">18 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">19 €</span></td>
</tr>
<tr>
<td><strong><span style="font-family: verdana, geneva; font-size: 12pt;">2 HEURES</span></strong></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">40 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">30 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">32 €</span></td>
</tr>
<tr>
<td><strong><span style="font-family: verdana, geneva; font-size: 12pt;">Demi-journée (3 heures)</span></strong></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">50 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">/</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">40 €</span></td>
</tr>
<tr>
<td><strong><span style="font-family: verdana, geneva; font-size: 12pt;">Demi-journée avec repas de midi au restaurant inclus</span></strong></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">60 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">/</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">48 €</span></td>
</tr>
<tr>
<td><strong><span style="font-family: verdana, geneva; font-size: 12pt;">Journée (2 x 3 heures) sans repas inclus</span></strong></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">80 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">/</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">64 €</span></td>
</tr>
<tr>
<td><strong><span style="font-family: verdana, geneva; font-size: 12pt;">Journée (2 x 3 heures) avec repas de midi au restaurant inclus</span></strong></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">100 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">/</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">80 €</span></td>
</tr>
<tr>
<td>
<p><strong><span style="font-family: verdana, geneva; font-size: 12pt;">Carte d'abonnement promenades 10 heures</span></strong><br /><span style="font-family: verdana, geneva; font-size: 12pt;">(Abonnements nominatifs, valables 3 mois, non remboursables. Le détenteur de la carte peut en faire profiter son entourage)</span></p>
</td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">160 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">130 €</span></td>
<td style="text-align: center;"><span style="font-family: verdana, geneva; font-size: 12pt;">/</span></td>
</tr>
</tbody>
</table>

Connexion pour participer à la conversation.

25 Jui 2017 08:58 #2 par RobertG
Mon test en réduisant la taille de mon navigateur m'a permis de voir le tableau, avec inversion lignes/colonnes à partir d'une certaine taille et apparition d'un curseur horizontal. Bref ça fonctionne, amis ce n'est pas idéal malgré l'utilisation de cette extension;

Pour des tableaux responsive, il est conseillé d'utiliser les fonctionnalités Bootstrap : getbootstrap.com/css/#grid
Reste à voir si ça résoudra le problème pour ce type de tableau (je n'en ai pas l'expérience).

"Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes, il n'y a que des solutions" (André Gide). MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info hébergés chez PHPNET - Site pro : www.robertg-conseil.fr

Connexion pour participer à la conversation.

26 Jui 2017 12:39 #3 par Louismarc
Bonjour,

Merci pour le conseil, mais je crains de ne pas être au niveau pour les fonctionnalités Bootstrap, malheureusement.

Sur les plus petits écrans, comme un iphone4, ça donne ça :



Il me semble que l'idéal serait d'arriver à ça :



mais je ne sais pas si c'est possible.

Sinon, est-ce qu'il y aurait quelque chose à faire en donnant des tailles de caractères en %, avec des limites maxi/mini ?

Au pire, si rien de tout ça n'est applicable, je transforme le tableau en liste...
Pièces jointes :

Connexion pour participer à la conversation.

26 Jui 2017 14:29 #4 par RobertG
A mon avis, il ne sera pas possible de faire mieux avec des tableaux standard.
L'extension utilisée place, après inversion comme on le voit, le reste du tableau à droite de ce qu'on voit sur la première image et on doit glisser au doigt pour en voir le contenu, je l'ai vérifié sur mon smartphone, mais encore faut-il avoir une largeur supérieure à ce qu'on voit sur la première copie d'écran.

"Patience et longueur de temps font plus que force ni que rage..." (La Fontaine : Le Lion et le Rat) - "Il n'y a pas de problèmes, il n'y a que des solutions" (André Gide). MoovJla et LazyDbBackup sur www.joomxtensions.com - FaQ sur www.fontanil.info hébergés chez PHPNET - Site pro : www.robertg-conseil.fr

Connexion pour participer à la conversation.

30 Jui 2017 13:32 #5 par Louismarc
Non, effectivement, je n'arrive pas à quelque chose de lisible, je me contenterai de listes à puces...
Merci d'avoir pris du temps pour regarder ça.

Connexion pour participer à la conversation.

Temps de génération de la page : 0.282 secondes

Sur ce site, nous utilisons des cookies.