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

Afficher toutes les colonnes d'une ligne les unes unes au dessous des autres sur un mobile

🆙 table_by_rows (table_par_lignes) : tables responsives par empilement des colonnes par lignes.

Cliquer pour lire la documentation

{up table-par-lignes}
< table> ... < /table>
{/up table-par-lignes}
les colonnes sont empilées 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: UP-1.0 @license: GNU/GPLv3 @credit: codefog @tags: Responsive
  • table_by_rows (table_par_lignes): rien
  • breakpoint = 720px: bascule en vue responsive
  • max-height: max-height pour la table

Style CSS

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

paramètres Javascript pour configuration

  • merge: fusion de colonnes. 1:[2,3],5:[6] = 2&3 avec 1 et 6 avec 5
  • move: déplacement 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.

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

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 THEAD
UP table par lignes

Exemple: les pays frontaliers 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 table ----
{/up table-par-lignes}

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 table ----
{/up table-par-lignes}

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
Pour info, cette page utilise 7 action(s) :
upactionslist (1) addcsshead (1) div (1) modal (1) table-par-lignes (2) jcontent-info (1)
Détails