JoomlaDay FR

table-par-lignes ~ empile les colonnes d'une ligne

Détails
Catégorie : Actions
Affichages : 65
➠ table_by_rows (table-par-lignes) : tables responsives par empilement des colonnes par lignes. ➠ DEMO
Syntaxe {up table-par-lignes}contenu table{/up table-par-lignes}
les colonnes sont empilés par lignes avec la possibilité de les déplacer, de les fusionner, de supprimer le titre, d'afficher seulement certaines colonnes. https://github.com/codefog/restables/blob/master/README.md
IMPERATIF : Les titres des colonnes doivent être dans une balise HEAD
author lomart version 1.0 - 07/2017 license GNU/GPLv3 credit codefog
  • table_by_rows (table-par-lignes): rien
  • breakpoint=720px: bascule en vue responsive
  • class: classe(s) pour balise table
  • style: style inline pour balise table
  • max-height: max-height pour la table
  • merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
  • move: deplacement colonne. 1:0,6:1 = 1 au debut et 6 en 2eme
  • skip: non visible. [3,5] = col 3 et 5 non visible
  • span: [2,4] = valeur sans libellé (eq: colspan)

    Basé sur un script de Codefog(Licence MIT)

    Cette action permet d'afficher une table de façon responsive. Pour chaque ligne, elle affiche le couple libellé - valeur les uns au dessous des autres. 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
    • merge: fusionne les valeurs d'un ou plusieurs colonnes avec une autre qui conserve son libellé.
      Exemple: colonne 1 est le prénom, colonne 2 le nom. 2[1] affichera : nomNom Prénom
    • move: déplace la colonne. Exemple: 1:0,6:1 = 1 au debut et 6 en 2eme
    • skip: masque certaines colonne. Exemple: [3,5] -> col 3 et 5 non visible
    • span: affiche sur la largeur totale (colspan)? Equivaut à masquer le libellé colonne. Exemple pour les colonnes 3 et 8 [3,8]

    Attention: les colonnes sont numérotées à partir de ZERO

    Impératif : Les titres des colonnes doivent être dans une balise HEAD

    Exemple: les pays frontalier de la France

    Redimensionner votre navigateur pour voir l'effet responsive

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

    La bascule responsive se fait à 600px.
    Les 2ème, 3ème et 4ème colonnes (Plaques minéralogiques, Indicatif téléphonique, TLD) seront masquées.
    La table fera toujours 100% de large.

    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

    Les pays Européen

    Redimensionner votre navigateur pour voir l'effet responsive

    {up table-par-lignes | max-height=250px}

    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.
    Seules les colonnes nom français et capitale sont affichés
    La table fera toujours 100% de large.

    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