HTML + CSS "figer" la première colonne d'un tableau

Le
Gérald Niel
Bonjour,

j'extrait des données d'une (de) BDD pour présenter des rapports sous
forme de tableaux dans des pages html qui regroupent les données
similaires extraitent de plusieurs sources différentes.
J'ai essayé des usines à gaz JS comme jqxGrid ou Datatables, certes ça
fait ce que je veux mais avec les inconvénients du JS alors que je
fais déjà tout le traitement coté serveur et que je n'ai pas besoin de
toutes les options.

La majorité des tableau est sur le même schéma :

<caption>
<thead>
+-+--+++
| | intitulé gr | intitulé gr | |
+ th1 +--+--+--+--+--+--+--++ th11 |
| | th2 | th3 | th5 | th6 | th7 | th8 | th9 | th10 | |
+-+--+--+--+--+--+--+--+++
<tbody>
+-+--+--+--+--+--+--+--+++
| lib. | | | | | | | | | |
+-+--+--+--+--+--+--+--+++
<tfoot>
+-+--+--+--+--+--+--+--+++
| Tot | | | | | | | | | |
+-+--+--+--+--+--+--+--+++

Mes colonnes ont une classe .th* et .td* (de 1 au nombre de colonnes).
Mes table sont dans des conteneurs dont la largeur est en % et en overflow auto.
Les colonnes sont en white-space: nowrap avec un min-width en px (pour
l'esthétique) et des width en %.

Jusque là pas de soucis.

Mais… il faudrait que je puisse figer la première colonnes.

Quelques recherches m'ont données quelques pistes, mais le résultat
n'est pas satisfaisant (j'ai peur que les colpsan et rowspan du thead
en soient la cause).

positionnement absolu de la première et seconde colonne avec une marge
gauche identique à la largeur de la première, tout défile
horizontalement.

positionnement fixé de la première colonne, marge gauche identique à
la largeur de la première colonne pour la seconde, là ça fonctionne
pas mal sauf pour la deuxième ligne du header toujours plaquée à gauche.
Et j'ai un décalage en hauteur pour la première colonne qui semble
correspondre aux bordures.

Ocassionnellement je voudais aussi fixer la hauteur des tableaux et ne
faire défiler que le tbody (je n'ai pas encore essayé).

Toutes solutions qui nécéssiterait de casser la structure du html est
exclue d'avance.

Donc si on peut pas, sans JS qui finalement ne sert à rien et charge
le client pour rien, et bien tant-pis !

Je n'ai pas étudié le code html final et css de Datatables qui fait ce
que je veux (avec le même décalage en hauteur pour la première colonne
cependant).

--
On ne le dira jamais assez, l'anarchisme, c'est l'ordre sans le
gouvernement ; c'est la paix sans la violence. C'est le contraire
précisément de tout ce qu'on lui reproche, soit par ignorance, soit
par mauvaise foi. -+- Hem Day -+-
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Jean Francois Ortolo
Le #26388524
Le 08/02/2016 08:30, Gérald Niel a écrit :
Bonjour,

j'extrait des données d'une (de) BDD pour présenter des rapports sous
forme de tableaux dans des pages html qui regroupent les données
similaires extraitent de plusieurs sources différentes.
J'ai essayé des usines à gaz JS comme jqxGrid ou Datatables, certes ça
fait ce que je veux mais avec les inconvénients du JS alors que je
fais déjà tout le traitement coté serveur et que je n'ai pas besoin de
toutes les options.

La majorité des tableau est sur le même schéma :

<caption>
<thead>
+-------+-----------------------+------------------------+------+
| | intitulé gr | intitulé gr | |
+ th1 +-----+-----+-----+-----+-----+-----+-----+------+ th11 |
| | th2 | th3 | th5 | th6 | th7 | th8 | th9 | th10 | |
+-------+-----+-----+-----+-----+-----+-----+-----+------+------+
<tbody>
+-------+-----+-----+-----+-----+-----+-----+-----+------+------+
| lib. | | | | | | | | | |
+-------+-----+-----+-----+-----+-----+-----+-----+------+------+
<tfoot>
+-------+-----+-----+-----+-----+-----+-----+-----+------+------+
| Tot | | | | | | | | | |
+-------+-----+-----+-----+-----+-----+-----+-----+------+------+

Mes colonnes ont une classe .th* et .td* (de 1 au nombre de colonnes).
Mes table sont dans des conteneurs dont la largeur est en % et en overflow auto.
Les colonnes sont en white-space: nowrap avec un min-width en px (pour
l'esthétique) et des width en %.

Jusque là pas de soucis.

Mais… il faudrait que je puisse figer la première colonnes.

Quelques recherches m'ont données quelques pistes, mais le résultat
n'est pas satisfaisant (j'ai peur que les colpsan et rowspan du thead
en soient la cause).

positionnement absolu de la première et seconde colonne avec une marge
gauche identique à la largeur de la première, tout défile
horizontalement.

positionnement fixé de la première colonne, marge gauche identique à
la largeur de la première colonne pour la seconde, là ça fonctionne
pas mal sauf pour la deuxième ligne du header toujours plaquée à gauche.
Et j'ai un décalage en hauteur pour la première colonne qui semble
correspondre aux bordures.

Ocassionnellement je voudais aussi fixer la hauteur des tableaux et ne
faire défiler que le tbody (je n'ai pas encore essayé).

Toutes solutions qui nécéssiterait de casser la structure du html est
exclue d'avance.

Donc si on peut pas, sans JS qui finalement ne sert à rien et charge
le client pour rien, et bien tant-pis !

Je n'ai pas étudié le code html final et css de Datatables qui fait ce
que je veux (avec le même décalage en hauteur pour la première colonne
cependant).






Bonjour Monsieur

Si j'ai bien compris,c'est un problème css, à régler en amont avec
une classe css spécifique pour les premières colonnes ?

De tout manière faudra bien modifier les css ?

Respectueusement.

Jean François Ortolo
Gérald Niel
Le #26388528
Le Lundi 08 février 2016 à 07:37 UTC, Jean Francois Ortolo écrivait sur
fr.comp.infosystemes.www.auteurs :

De tout manière faudra bien modifier les css ?



Evidement.

Je comprend pas bien cette réponse ! ;)

Quand je parle de structure html, je parles de l'utilité sémantique
des balise html.

La plupart des pistes trouvées lors de mes recherche soit duplique
du contenu pour le superposer, soit scinde le tableau en plusieurs.
Ce qui n'est pas satisfaisant pour qui lirait le rapport avec un
navigateur textuel.

@+
--
On ne le dira jamais assez, l'anarchisme, c'est l'ordre sans le
gouvernement ; c'est la paix sans la violence. C'est le contraire
précisément de tout ce qu'on lui reproche, soit par ignorance, soit
par mauvaise foi. -+- Hem Day -+-
Gérald Niel
Le #26388581
Le 08/02/2016 08:30, Gérald Niel a écrit :

j'ai peur que les colpsan et rowspan du thead en soient la cause



Le rowspan en fait.
C'est la seconde ligne (<tr>) du <thead> qui pose problème.

J'y arrive presque (je me triture les méninges avec le calcul des
dimensions -largeur- des cellules) en mettant une position fixed à la
première colonne et un padding left à la seconde si je n'ai pas de
rowspan et une seule ligne dans le th.
Reste le texte de la seconde colonne de titre qui n'est plus centré.

--
Gérald Niel
Gérald Niel
Le #26388620
Le Lundi 08 février 2016 à 15:43 UTC, Gérald Niel écrivait sur
fr.comp.infosystemes.www.auteurs :

J'y arrive presque (je me triture les méninges avec le calcul des
dimensions -largeur- des cellules) en mettant une position fixed à la
première colonne



Oui mais non.
Car c'est fixe dans le conteneur sur le scoll horizontal.
Mais pour le scroll vertical, c'est fixe sur la page, ça ne reste pas
dans le conteneur.

#grmbl

--
On ne le dira jamais assez, l'anarchisme, c'est l'ordre sans le
gouvernement ; c'est la paix sans la violence. C'est le contraire
précisément de tout ce qu'on lui reproche, soit par ignorance, soit
par mauvaise foi. -+- Hem Day -+-
Gérald Niel
Le #26388685
Bonjour,

je termine mon quasi monologue…

Le Lundi 08 février 2016 à 19:16 UTC, Gérald Niel écrivait sur
fr.comp.infosystemes.www.auteurs :
Le Lundi 08 février 2016 à 15:43 UTC, Gérald Niel écrivait sur
fr.comp.infosystemes.www.auteurs :

J'y arrive presque (je me triture les méninges avec le calcul des
dimensions -largeur- des cellules) en mettant une position fixed à la
première colonne



Oui mais non.
Car c'est fixe dans le conteneur sur le scoll horizontal.
Mais pour le scroll vertical, c'est fixe sur la page, ça ne reste pas
dans le conteneur.



Après moult recherches et essais, il faut se rendre à l'évidence :
si il est relativement aisé en CSS de fixer dans le conteneur le
contenu des <thead> et <tfoot> afin de faire défiler verticalement le
contenu de <tbody> qui dépasserait de la hauteur disponible, il
n'existe (à priori) pas d'autres solutions que de dupliquer le contenu
et supperposer les couches pour le résultat attendu.

J'ai donc opté, puisque ça le fait bien finalement si on prcède dans
l'ordre, pour Datatable(1) (css + JS) plutôt que de ré-inventer la roue.
Testé sous FF, Chrome et Safari sous Mac OSX (on testera sous Windows
tout à l'heure…)

L'utilisation de JS se justifie pour le coup, puisque ça vient se
rajouter au dessus du code html. C'est ce qui "duplique" ce qu'il y a
à dupliquer. Je ne l'utilise pas pour ajouter du contenu
supplémentaire (les tables et les données à présenter sont déjà dans la
structure du document HTML).
La structure du document HTML est conforme et le document reste
lisible dans toutes les circonstance :
- sémantique (navigateur textuel, indexation)
- sans JS (dans ce cas les colonnes ne sont pas figées)

D'autre part, dans le contexte, je connais les navigateurs utilisés
qui sont les trois cités ci-dessus sous Mac OSX ou Windows.

(1) :
@+
--
On ne le dira jamais assez, l'anarchisme, c'est l'ordre sans le
gouvernement ; c'est la paix sans la violence. C'est le contraire
précisément de tout ce qu'on lui reproche, soit par ignorance, soit
par mauvaise foi. -+- Hem Day -+-
Publicité
Poster une réponse
Anonyme