UP-LOMART - 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)