28172 sujets

CSS et mise en forme, CSS3

TABLE : Scrollable TBODY and fixed THEAD reloaded

Salut à tous,

concernant le sujet des tables scrollables sauf entête, google n'arrête pas d'orienter vers cette discussion http://forum.alsacreations.com/topic-4-47627-1-TABLE--Scrollable-TBODY-and-fixed-THEAD.html qui malheureusement est fermée.

Donc je ressuscite le sujet et vous propose une approche purement html/css - à légèrement adapter pour IE - si c'est encore un sujet d'actualité de nos jours...

L'explication progressive : http://journaldudoj.blogspot.fr/2012/06/comment-faire-un-tableau-scrollable.html

Le résultat final :

<style>
#ministres thead {
	display:block;
}
#ministres tbody {
	display:block;
	height:5em; /* 5 times the equivalent of a text "size". */
	overflow-y:scroll;
}

	#ministres thead tr th:nth-child(1) { /* column 1 ! */
		width:5em;
	}
	#ministres thead tr th:nth-child(2) { /* column 2 */
		width:10em;
	}
	#ministres tbody tr:first-child td:nth-child(1) { /* column 1 ! */
		width:5em;
	}
	#ministres tbody tr:first-child td:nth-child(2) { /* column 2 */
		width:10em;
	}
</style>
<table id="ministres" border="1">
	<thead>
		<tr><th>Nom</th><th>Ministère</th></tr>
	</thead>
	<tbody>
		<tr><td>JM Ayrault</td><td>Premier</td></tr>
		<tr><td>L Fabius</td><td>A. Etrangères</td></tr>
		<tr><td>V Peillon</td><td>Education</td></tr>
		<tr><td>C Taubira</td><td>Justice</td></tr>
		<tr><td>P Moscovici</td><td>Economie</td></tr>
		<tr><td>M Valls</td><td>Intérieur</td></tr>
	</tbody>
</table>
C'est une fonctionnalité évidente qui manque cruellement aux tableaux HTML.

J'ai fait presque tous les tutos sur les "scrollable table", en CSS et Javascript. Votre solution est la plus élégante de toutes. Bravo et merci.
Juste un copier-coller et c'est nickel.
Bravo, c'est élégant mais il faut que je passe maintenant quelques temps à comprendre pourquoi les first-child td:nth-child(1)
Merci
Modérateur
cela peut fonctionner avec max-height http://jsfiddle.net/f2XYF/16/ , par contre, pour maintenir les largeurs de colonnes, l'usage de table-layout:fixed est recommandé .

En ressortant un viel example de 2013 un peu plus complexe, il y a aussi la possibilité de cloner thead pour en fixer un et cacher l'autre dessous http://dabblet.com/gist/5648624 pour ne pas avoir à gérer la largeur de la barre de défilement ....
Merci pour cette très belle solution qui fonctionne à merveille. Je l'ai intégrée à SystemImager (commentaire pointant vers cette page dans le code css).

Cette table est alimentée par un server sent event. J'aimerais que cette table montre tout le temps la dernière ligne en "scrollant" vers le bas automomatiquement si nécessaire.

J'ai essayé tout ce que j'ai pu trouver sur le net, mais impossible de faire quoi que ce soit.
L'idée me paraissant simple:
Si la dernière ligne est visible:
- Ajouter la nouvelle ligne
- Scroller vers le bas d'un <tr> pour rendre la nouvelle ligne visible du point de vue tbody visible (genre il faut que ca ne soit pas perturbé par le fait qu'on scrolle la page pour avoir le tableau à moitié visible.).
Sinon:
- Ajouter la ligne
- Ne pas scroller car cela veut dir que l'utilisateur est monté voir plus haut dans la table en la scrollant manuellement
Fin si

Pour l'instant, je n'arrive meme pas a tester si la dernière ligne de la table est visible...
l'attribut display vaut table-raw et l'attribut visibility vaut visible meme pour les lignes qui ne sont pas visible.
La seule chose que j'arrive à faire, c'est compter les lignes de mon tbody: document.getElementById("serverData").children.length

Concernant la taille de mon tbody, je n'arrive pas à la trouver dans quelque unité que ce soit.
Je ne parle meme pas de trouver les dimensions de la partie visible (celle qui est dessinée)...

Bref, je sèche...
Mon code se trouve ici:
https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/client_console.php
Au niveau de la ligne 168 (document.getElementById("serverData").innerHTML += logLine;)
Avant cette ligne, mémoriser si la dernière ligne est visible dans la zone scrollable du tbody
Après cette ligne scroller de un "tr" vers le bas si la dernière ligne était visible.

Si quelqu'un a une idée efficace pour faire ça en javascript sans jquery, ça m'intéresse fortement Smiley smile
Modérateur
LOL ,

pour le déterrage et le soucis de scroll:
var tag  = document.getElementById('el');
var tops = tag.scrollHeight;
tag.scrollTop=tops

ou el est l'id de ta boite qui scroll .....

maj des 2 exemples http://dabblet.com/gist/e94e2eadadbd176a97b3f051ee4095f2 & http://jsfiddle.net/bL6dg2r1/

Mais apparemment aux vues de ton script , tu as déjà cette fonctionnalité :
a écrit :
https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/client_console.php

  if ( needToScrollDown ) {
    serverData_elm.scrollTop = serverData_elm.scrollHeight - bodyBounding.height;
  }
}


Modifié par gcyrillus (21 Oct 2019 - 14:28)
Merci pour votre aide, en fait, j'ai fait chauffer google Smiley smile

Maintenant, je me heurte à un autre soucis: ma table est dans un Flexbox, le header doit rester toujours affiché et la table occuper tout l'espace dispo en dessous. ça fonctionne et on peut agrandir la fenêtre. Par contre, si on réduit la fenêtre, la table garde sa taille agrandie et tou le document peut scroller et le header monte au ciel...

Je vais ouvrir un nouveau sujet pour pas polluer celui-ci:
https://forum.alsacreations.com/topic-4-85830-1-Table-dans-une-colonne-flex-avec-tbody-scrollable-Je-ny-arrive-pas.html
Modifié par olahaye74 (24 Oct 2019 - 16:48)
Sujet clos
Aller à