Tableau responsive design ?

[fm76]

Bonjour,
J'ai inséré un tableau dans un article mais sur smartphone l'affichage est tronqué, l'affichage de l'écran ne s’adapte pas au taille des périphériques utilisés.
Joomla v3.8.12 + TinyMCE
Avez-vous une idée pour résoudre ce problème, je pense classique !
Merci pour votre aide.

[lomart]

Bonsoir,

Mon plugin UP propose 4 méthodes pour afficher des tableaux sur un smartphone :

- https://up.lomart.fr/demo/action-table-by-rows : empile les colonnes d'une ligne
- https://up.lomart.fr/demo/action-table-by-columns : empile les lignes par colonnes
- https://up.lomart.fr/demo/action-table-flip : permute les colonnes et les lignes d'une table
- https://up.lomart.fr/demo/action-table-fixe : bloque le défilement de l'entête et de colonnes

Aucune méthode n'est universelle, cela dépend des données affichées

[manu93fr]

Aucune méthode n'est universelle, cela dépend des données affichées

en espérant que ce soit bien des données et pas des photos par exemple

[fm76]

Bonjour, merci pour votre message.
Oui il s'agit bien d'un tableau de données , 2 colonnes et 10 lignes.
Liste d'intitulé (description du produit) et les prix correspondants (en 2ème colonne).
Ce tableau est présent sur une centaines d'articles (avec des valeurs de données différentes).

[lomart]

Bonjour,

Ce tableau est généré comment ? par une extension ou manuellement ?

[fm76]

Bonjour Iomart.
Comme précisé dans ma demande initiale, le tableau est généré par l'éditeur TinyMCE, en utilisant le bouton Insérer un tableau de la barre d'outils.
J'ai trouvé comment intégré le resize automatique de la largeur des 2 colonnes en fonction de la taille du périphérique (PC , Smartphone), dans les propriétés du tableau, il faut indiquer la largeur (non pas un nombre de points fix) en indiquant la valeur 100%.
Il est également possible de le faire pour la hauteur des lignes en cas de besoin.
Pas mal d'autres paramètres, sont disponibles pour régler les aspects des tableaux: forme et taille des contours ou quadrillage du tableau, couleurs, image de fond etc.
Quelles sont les avantages de votre plugin par rapport à l'éditeur standard ?

[fm76]

Euh non, le tableau n'est pas généré par TinyMCE mais l'éditeur WYSIWIG JCE.

[lomart]

Bonjour,

Quelles sont les avantages de votre plugin par rapport à l'éditeur standard ?

Testez les liens de démonstration en redimensionnant la fenêtre de votre navigateur, vous les verrez immédiatement

Ci-dessous, un exemple en image :

[oliv316]

Bonjour
alors je galère à insérer le code

[B]{[/B]up table-par-lignes | breakpoint=600px | skip=[1,2,3] | style=width:100%[B]}[/B]

car à chaque fois que je valide, mon éditeur "JCE editor" me rajoute un

<p>

devant mon code

<p>{up table-par-colonnes | breakpoint=600px | skip=[1,2,3] | style=width:100%}</p>
<table style="width: 100%;">
<tbody>
<tr><th style="width: 84.9px;">Heure</th><th style="width: 183px;">Lundi 1</th><th style="width: 237.383px;">Mardi 2</th><th style="width: 166.533px;">Mercredi 3</th><th style="width: 249.183px;">Jeudi 4</th></tr>
<tr>

et

</tbody>
</table>
<p>{/up table-par-colonnes}</p>

qui plus est cela ne marche pas merci de votre aide si vous avez une idée

[lomart]

Bonjour,

Quelle version de UP utilisez-vous ?

J'ai revu les procédures de nettoyage des balises ajoutées par les éditeurs wysiwyg dans la version 1.8.

[Eddy.vh]

Bonjour.

S'il s'agit d'une liste d'articles (produits) et de leur prix, il y a aussi l'option csv2list qui fait une jolie mise en page avec point de conduite…

[oliv316]

Bonjour,

Quelle version de UP utilisez-vous ?

J'ai revu les procédures de nettoyage des balises ajoutées par les éditeurs wysiwyg dans la version 1.8.

la version 1.8.1

j'ai déinstallé le plug-in re installer , mis mes lunettes et ça a marché

merci de votre aide