Une table responsive pour bloquer le défilement de l'entête et de colonnes
{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.
- 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 th[background:var(--beige)]#demo2 tr td:nth-child(2)[background:var(--jauneFonce);text-align:center]}
{up table-fixe | max-height=200px | col-left=2 | class=bd-vert bg-jauneClair
| css-head=@media(max-width:480px)[#demo2 th[writing-mode:sideways-lr;word-wrap: break-word;height:100px;line-height: 1.1;vertical-align:bottom]]}
<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 cet exemple pour montrer la possibilité d'avoir un nombre de colonnes à gauche spécifique.
Une explication sur l'option css-head. Elle contient une mediaquerie pour forcer la césure et afficher verticalement les titres des colonnes pour les petits écrans (au-dessous de 480px).
Il était bien sûr possible de regrouper toutes les règles CSS dans css-head ou dans l'action addcsshead.
upactionslist (1) table-fixe (2) addcsshead (1) jcontent-info (1)