HTML + CSS "figer" la première colonne d'un tableau
5 réponses
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.
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 -+-
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Jean Francois Ortolo
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.
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
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.
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 ?
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.
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 ?
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 -+-
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 -+-
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 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
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é.
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é.
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 -+-
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 -+-
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
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) : <URL:https://www.datatables.net/>
@+ -- 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 -+-
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) : <URL:https://www.datatables.net/>
@+
--
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 -+-
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) : <URL:https://www.datatables.net/>
@+ -- 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 -+-
