table-par-colonnes ~ empile les lignes par colonnes

Idéal pour afficher une table planning en responsive

➠ table_by_columns (table-par-colonnes) : tables responsives par empilement des lignes d'une colonne. DEMO
Syntaxe {up table-par-colonnes}contenu table{/up table-par-colonnes}
Les lignes sont empilées par colonnes. Très pratique pour des plannings
author lomart version 1.0beta - 07/2017 license GNU/GPLv3 credit John Polacek
  • table_by_columns (table-par-colonnes): méthode responsive : fixed, flip, groupbycols, groupbyrows
  • breakpoint=720px: bascule en vue responsive
  • model=up-stacktable: nom d'un fichier CSS prévu par le webmaster pour toutes les tables de la page
  • class: classe(s) pour balise table
  • style: style inline pour balise table
  • max-height: max-height pour la table
  • key-width=35%: pour bloquer le header en haut
  • title-style: style pour la ligne titre en vue responsive

    Basé sur un script de John Polacek (Licence MIT)

    Cette action permet d'afficher une table de façon responsive. Pour chaque colonne, elle affiche le couple valeur première colonne - valeur de la colonne. Si necéssaire, des ascenseurs (horizontal et/ou vertical) seront ajoutés.

    On dispose d'options pratiques comme:

    • breakpoint: indication de la largeur pour bascule en vue responsive. Très pratique pour coller au contenu de la table.
    • max-height: possibilité de limiter la place en hauteur par l'affichage d'un ascenseur
    • modele: modele CSS prévu par le webmaster pour toutes les tables de la page
    • key-width: largeur de la première colonne en vue responsive
    • title-style: personnalisation CSS du titre en vue responsive

    Attention: les balises ROWSPAN, THEAD et TFOOTER ne sont pas supportées par le script

    La mise en forme de la table peut se faire dans un éditeur wysiwyg

    Exemple: Planning

    Redimensionner votre navigateur pour voir l'effet responsive

    Cet exemple fictif reprend les conférences du dernier JoomlaDay

    {up table-par-colonnes | breakpoint=600px | title-style=background-color:#069 | key-width=20% | style=width:100%;text-align:center}

    La bascule responsive se fait à 600px.
    En vue responsive, le titre sera sur fond bleu avec une première colonne à 20% de largeur.
    La table fera toujours 100% de large.

    Heure Lundi 1 Mardi 2 Mercredi 3 Jeudi 4
    8h30 Ouverture des portes
    9h - 9h30 Keynote d’ouverture Présentation du programme journalier
    9h30 - 10h30 Plusieurs millions de Joomleurs en France, c'est possible ! Votre transformation digitale facilitée avec le CMS Joomla! Lightning Talks Développer son business grâce à une bonne relation client
    10h30 - 11h Pause
    9h30 - 10h30 Vous saurez tout sur Joomla! 3.7 10 tendances SEO à mettre en œuvre avec Joomla! Akeeba Backup & Amazon S3 CCK : NapContent, une nouvelle alternative aux solutions existantes
    12h - 13h30 déjeuner
    13h30-15h Design de template sur mesure avec Template Creator CK Développer un Composant avec le Builder Cook Self Service Gestion de ses notes et documentation Découvrez le potentiel des champs personnalisés de Joomla 3.7
    16h-18h Atelier : Créer une application SEBLOD côté front-end
    J'aurais dû rester au lit ce matin (conception d'une CVthèque avec Joomla!) Atelier : Surcharges, CSS et JS dans la 3.7 Coupler AcyMailing et ElasticEmail pour une gestion performante de ses newsletters
    20h restaurant restaurant diner-spectacle restaurant

    Les pays européens

    Redimensionner votre navigateur pour voir l'effet responsive

    {up table-par-colonnes | max-height=500px | style=border:2px solid red}

    La bascule responsive n'étant pas spécifiée, elle se fera à la valeur par défaut: 720px. Redimensionnez votre écran pour voir que les 2 tables réagissent différement.
    La table a une hauteur maximale de 500px. J'ai ajouté une bordure rouge pour le mettre en évidence.

    Nom français Plaques minéralogiques Indicatif téléphonique TLD Capitale Nom anglais Population Superficie Latitude Longitude Altitude
    Albanie AL 355 .al Tirana Albania 2.821.977 28.748 km2 41.111 20.027 708
    Allemagne D 49 .de Berlin Germany 80.619.000 357.022 km2 51.202 10.382 263
    Andorre AND 376 .ad Andorre-la-Vieille Andorra 76.098 468 km2 42.551 1.576 1996
    Autriche A 43 .at Vienne Austria 8.504.850 83.858 km2 47.589 14.140 910
    Belgique B 32 .be Bruxelles Belgium 11.132.269 32.545 km2 50.649 4.642 181
    Bosnie-Herzégovine BIH 387 .ba Sarajevo Bosnia and Herzegovina 3.791.622 51.197 km2 44.169 17.783 500
    Bulgarie BG 359 .bg Sofia Bulgaria 7.282.041 110.912 km2 42.767 25.282 472
    Croatie HR 385 .hr Zagreb Croatia 4.290.612 56.538 km2 45.743 17.099 331
    Danemark DK 45 .dk Copenhague Denmark 5.627.235 43.094 km2 56.102 9.556 34
    Espagne E 34 .es Madrid Spain 46.609.700 505.992 km2 40.396 -3.551 660
    Estonie EST 372 .ee Tallinn Estonia 1.311.870 45.100 km2 58.694 25.253 61
    Finlande FIN 358 .fi Helsinki Finland 5.452.821 338.145 km2 64.290 25.992 164
    France F 33 .fr Paris France 65.844.000 551.500 km2 46.642 2.338 375
    Grèce GR 30 .gr Athènes Greece 10.815.197 131.957 km2 38.301 23.741 498
    Hongrie H 36 .hu Budapest Hungary 9.906.000 93.032 km2 47.166 19.418 143
    Irlande IRL 353 .ie Dublin Ireland 4.593.100 70.273 km2 53.183 -8.199 118
    Islande IS 354 .is Reykjavik Iceland 325.671 103.000 km2 64.929 -18.962 557
    Italie I 39 .it Rome Italy 59.943.933 301.318 km2 42.768 12.492 538
    Kosovo RKS 381 .xk Pristina Kosovo 1.815.606 10.887 km2 42.576 20.899 433
    Lettonie LV 371 .lv Riga Latvia 2.003.900 64.600 km2 56.869 24.841 87
    Liechtenstein FL 41 .li Vaduz Liechtenstein 37.132 160 km2 47.145 9.554 519
    Lituanie LT 370 .lt Vilnius Lithuania 2.941.953 65.300 km2 55.338 23.874 110
    Luxembourg LT 352 .lu Luxembourg Luxembourg 537.000 2.586 km2 49.778 6.095 325
    Macédoine MK 389 .mk Skopje Macedonia 2.062.294 25.713 km2 41.603 21.715 741
    Malte M 356 .mt La Valette Malta 416.055 316 km2 35.933 14.381 50
    Moldavie MD 373 .md Chisinau Moldova 3.559.500 33.851 km2 47.203 28.473 139
    Monaco MC 337 .mc Monaco Monaco 36.136 2 km2 43.740 7.427 32
    Norvège N 47 .no Oslo Norway 5.109.056 385.155 km2 65.398 13.242 460
    Pays-Bas NL 31 .nl Amsterdam Netherlands 16.842.200 41.528 km2 52.342 5.528 30
    Pologne PL 48 .pl Varsovie Poland 38.502.396 312.685 km2 52.147 19.378 173
    Portugal P 351 .pt Lisbonne Portugal 10.487.289 91.982 km2 39.642 -8.346 372
    République tchèque CZ 42 .cz Prague Czech Republic 10.513.800 78.866 km2 49.739 15.333 433
    Roumanie RO 40 .ro Bucarest Romania 20.121.641 238.391 km2 45.839 25.009 414
    Royaume-Uni GB 44 .uk Londres United Kingdom 63.705.000 242.900 km2 54.071 -2.784 162
    Russie RUS 7 .ru Moscou Russia 143.700.000 17.098.200 km2 63.140 103.890 600
    Saint-Marin RSM 378 .sm Saint-Marin San Marino 33.540 61 km2 43.944 12.459 112
    Slovaquie SK 42 .sk Bratislava Slovakia 5.415.949 49.033 km2 48.707 19.487 458
    Slovénie SLO 386 .si Ljubljana Slovenia 2.061.963 20.256 km2 46.120 14.821 492
    Suède S 46 .se Stockholm Sweden 9.651.531 449.964 km2 62.915 16.237 320
    Suisse CH 41 .ch Berne Switzerland 8.112.200 41.284 km2 46.806 8.226 1350
    Turquie TR 90 .tr Ankara Turkey 76.667.864 783.562 km2 39.051 34.930 1132
    Ukraine UA 380 .ua Kiev Ukraine 45.426.200 603.700 km2 48.927 31.478 175
    Vatican / (Saint-Siège) V 379 .va Vatican Vatican City 839 0,44 km2 41.903 12.453 15