frendeitpt

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 - 07/2017 license GNU/GPLv3 credit lai32290 tags Responsive
  • table_fixe: aucun argument
  • col-left = 0: nombre de colonnes fixées à gauche
  • max-height: max-height pour le bloc parent
  • style: classes et styles pour le bloc parent
  • class: classe(s) pour le bloc parent (obsolète)

    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:yellow]}
    
    {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.