Rendre TBODY déroulable dans les navigateurs Webkit

Question

Je suis conscient de cette question, mais aucune des réponses ne fonctionne dans Safari, Chrome, etc.

La stratégie acceptée (comme démontré ici) consiste à définir la hauteur de tbody et les propriétés de débordement comme ceci :

        Ceci est l'en-tête et ne défiler pas

        contenu qui défiler
        contenu qui défiler
        contenu qui défiler
        contenu qui défiler
        contenu qui défiler
        contenu qui défiler
        contenu qui défiler

Malheureusement, cela ne fonctionne pas dans les navigateurs webkit. Il y a un rapport de bogue à ce sujet qui ne semble pas être une priorité élevée (signalé en juin 05).

Ma question est donc : existent-ils d'autres stratégies alternatives qui fonctionnent réellement? J'ai essayé l'approche des deux tableaux, mais il est impossible de garantir que l'en-tête se synchronisera avec le contenu. Dois-je juste attendre que Webkit le corrige?

Answer 1

Voici un exemple qui fonctionne:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Vous devez ajouter le display:block au thead > tr et tbody

Answer 2

L'utilisation du style display:block fonctionne uniquement si vous avez une seule colonne. Si vous avez plusieurs colonnes de données - avec plusieurs champs - alors display:block semble rendre toutes les colonnes de données défilables mais sous la 1ère colonne (fait de même dans Firefox - qui est le seul navigateur que je connaisse qui gère bien le défilement du tbody). En passant, sur Firefox - vous pouvez utiliser le style overflow-x: hidden pour supprimer le défilement horizontal.

J'ai réalisé que le problème que je mentionne ne se produit que si vous ne spécifiez pas une largeur pour les éléments th & td - si vous pouvez fixer les largeurs des colonnes alors cela fonctionne. Le problème pour moi est que je ne peux pas fixer les largeurs des colonnes.

Answer 3

Essayez la première méthode de cette page, pur CSS avec une seule table (2 divs autour de la table, et the thead est positionné en absolu) : http://www.cssplay.co.uk/menu/tablescroll.html Semble fonctionner sur FF4/IE9/IE8 en plus de IE7/FF3.6.

Answer 4

J'ai eu le même problème et j'ai écrit un script jQuery pour le faire pour moi... utilise deux éléments de tableau et formate le CSS en conséquence. J'espère que cela aidera d'autres personnes qui ont le même problème...

http://jsfiddle.net/pe295/1/

Answer 5

J'ai vu la solution excellente de Sean Haddy et je me suis permis de apporter quelques modifications :

• Utilisez des classes au lieu d'ID, pour qu'un seul script jQuery puisse être réutilisé pour plusieurs tables sur une même page
• Ajouté le support des éléments de table HTML sémantiques comme caption, thead, tfoot et tbody
• Rendu la barre de défilement optionnelle pour qu'elle n'apparaisse pas pour les tables qui sont "plus courtes" que la hauteur défilable
• Ajusté la largeur de la div de défilement pour amener la barre de défilement jusqu'au bord droit de la table
• Rendu le concept accessible en
  • utilisant aria-hidden="true" sur l'en-tête de table statique injecté
  • et en laissant l'en-tête original en place, simplement caché avec jQuery et en définissant aria-hidden="false"
• Montré des exemples de plusieurs tables avec des tailles différentes

Cependant, c'est Sean qui a fait le gros du travail. Merci à Matt Burland également, d'avoir souligné la nécessité de prendre en charge tfoot.

Veillez vérifier par vous-même sur http://jsfiddle.net/jhfrench/eNP2N/