table-permute ~ inversion lignes-colonnes

Permuter les colonnes et les lignes d'une table pour faciliter la lecture sur les petits écrans

🆙 table_flip (table_permute) : tables responsives par permutation lignes/colonnes

Cliquer pour lire la documentation

Inversion colonnes/lignes. les titres de colonnes deviennent la 1ère colonne et reste visibles.
Une barre de défilement est ajoutée pour les autres colonnes.
{up table-flip}
< table> ... < /table>
{/up table-flip}
@author: lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: Jason Gross @tags: Responsive
  • table_flip (table_permute): aucun argument

Style CSS

  • id: identifiant
  • style: classes et styles inline pour balise table
  • class: classe(s) pour balise table (obsolète)
  • css-head (base-css): permet d'ajouter des style à la table incluse

Basé sur un script de Jason Gross

Cette action permet d'afficher une table de façon responsive. Les lignes deviennent des colonnes et réciproquement. Si nécessaire, un ascenseur horizontal sera ajouté.

Il suffit d'entourer la table saisie en HTML ou avec un éditeur WYSIWYG comme TinyMCE par les shortcodes de UP

Exemple: les pays frontaliers de la France

Redimensionner votre navigateur pour voir l'effet responsive

{up table-permute | css-head=@media(max-width:800px)[#id th[max-width:40vw]] }
---- la table ----
{/up table-permute}

Le point de rupture n'est pas modifiable. Il est fixé à 800px.

Pour éviter que les titres des colonnes soient trop larges sur mobile, j'ajoute une médiaquerie CSS  pour la limiter à 40% de la largeur de l'écran.

Une section thead est optionnelle.

Nom français Plaques minéralogiques Indicatif téléphonique TLD Capitale Nom anglais Population Superficie Latitude Longitude Altitude
France F 33 .fr Paris France 65.844.000 551.500 km2 46.642 2.338 375
Belgique B 32 .be Bruxelles Belgium 11.132.269 32.545 km2 50.649 4.642 181
Luxembourg LT 352 .lu Luxembourg Luxembourg 537.000 2.586 km2 49.778 6.095 325
Allemagne D 49 .de Berlin Germany 80.619.000 357.022 km2 51.202 10.382 263
Suisse CH 41 .ch Berne Switzerland 8.112.200 41.284 km2 46.806 8.226 1350
Italie I 39 .it Rome Italy 59.943.933 301.318 km2 42.768 12.492 538
Monaco MC 337 .mc Monaco Monaco 36.136 2 km2 43.740 7.427 32
Espagne E 34 .es Madrid Spain 46.609.700 505.992 km2 40.396 -3.551 660
Royaume-Uni GB 44 .uk Londres United Kingdom 63.705.000 242.900 km2 54.071 -2.784 162
Pour info, cette page utilise 3 action(s) :
upactionslist (1) table-permute (1) jcontent-info (1)
Détails