table-fixe ~ entête et/ou première colonne fixe

Une table responsive pour bloquer le défilement de l'entête et de colonnes

🆙 table_fixe : tables responsives: ligne entete reste visible

Cliquer pour lire la documentation

{up table-fixe}
< table> ... < /table>
{/up table-fixe}
col-left : nombre de colonnes toujours visible.
Une barre de défilement est ajoutée pour les autres colonnes.
@author: lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: lai32290 @tags: Responsive
  • table_fixe: aucun argument
  • col-left: nombre de colonnes fixées à gauche
  • max-height: max-height pour le bloc parent

Style CSS

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

Basé sur un script de lai32290

Cette action permet de bloquer le défilement des entêtes colonnes (thead), ainsi qu'une ou plusieurs colonnes à gauche. Si nécessaire, des ascenseurs seront ajoutés.

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

Exemple: les pays frontalier de la France

Redimensionner votre navigateur pour voir l'effet responsive

{up table-fixe | max-height=200px | col-left=1 | class=bd-rouge}
---- la table ----
{/up table-fixe}

Une hauteur maximale de 200px est définie pour la démo. Un cadre rouge permet de la matérialiser.
col-left permet de fixer une colonne à droite. Pour en fixer deux, il faut écrire col-left=2

 

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

La présentation de la table est obtenue par l'ajout de classes UP dans la balise TABLE <table class="up-table-line w100">

Avec du style

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

L'exemple ci-dessus montre la possibilité de styler individuellement des tables.

{up addcsshead=#demo2 tr td:nth-child(1), #demo2 tr td:nth-child(2), #demo2 th[background:var(--beige)]}

{up table-fixe | max-height=200px | col-left=2 | class=bd-vert bg-jauneClair}
<table id="demo2">
...
</table>
{/up table-fixe}

On utilise l'action addcsshead pour définir les règles CSS pour la table "demo2". On force l'id directement dans la table. Je profite de cette exemple pour montrer la possibilité d'avoir un nombre de colonnes à gauche spécifique.

Pour info, cette page utilise 5 action(s) :
upactionslist (1) table-fixe (2) addcsshead (1) jcontent-info (1)

 

Détails