Comment puis-je laisser le corps d'un tableau défiler tout en gardant sa tête fixe ?

Question

Comment puis-je laisser le corps d'un tableau défiler tout en gardant sa tête fixe ?

Demandé el 24 de Septembre, 2008: Quand la question a-t-elle été
134920 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Je suis en train d'écrire une page où j'ai besoin d'un tableau HTML pour maintenir une taille fixe. J'ai besoin que les en-têtes en haut du tableau y restent en permanence, mais j'ai aussi besoin que le corps du tableau défile, quel que soit le nombre de lignes ajoutées au tableau. Pensez à une version miniature d'Excel. Cela semble être une tâche simple mais presque toutes les solutions que j'ai trouvées sur le web présentent des inconvénients. Comment puis-je résoudre ce problème ?

Demandé el 24 de Septembre, 2008 par minty

2 votes

Il y a beaucoup d'exemples. celui-ci est l'un d'entre eux .

Commenté el 25 de Septembre, 2008 par Darren Kopp

0 votes

Je dois cibler IE6, IE7, FF, ... mais surtout IE malheureusement.

Commenté el 25 de Septembre, 2008 par minty

0 votes

Il y a beaucoup de trucs CSS là-dedans. Il devrait être trivial de le faire fonctionner dans IE7.

Commenté el 25 de Septembre, 2008 par Jim

Afficher 6 autres commentaires

Answer 1

5 Réponses

Answer 2

53voto

Ken Penn Points 720

J'ai dû trouver la même réponse. Le meilleur exemple que j'ai trouvé est http://www.cssplay.co.uk/menu/tablescroll.html - J'ai trouvé que l'exemple n°2 fonctionnait bien pour moi. Vous devrez définir la hauteur du tableau intérieur avec le script de Java, le reste est du CSS.

Répondu el 29 de Septembre, 2008 par Ken Penn (720 Points )

3 votes

Malheureusement, cette méthode échoue lorsque vous avez un tableau large (défilement horizontal). Vous aurez deux barres de défilement horizontales, une pour l'en-tête et une pour les données.

Commenté el 18 de Août, 2011 par vol7ron

4 votes

Votre solution ne fonctionne pas si vous ne spécifiez pas la largeur de <th> à l'intérieur de <thead>

Commenté el 27 de Mai, 2012 par Alexandru Rada

2 votes

Pour respecter les (relativement) nouvelles normes de Stack Overflow, pourriez-vous modifier cette réponse pour inclure les éléments pertinents du lien ?

Commenté el 20 de Juin, 2016 par Nic Hartley

Afficher 2 autres commentaires

Answer 3

35voto

Vitalii Fedorenko Points 17469

J'ai trouvé DataTables d'être assez flexible. Bien que sa version par défaut soit basée sur jquery, il existe également une version Plugin AngularJs .

Répondu el 18 de Décembre, 2011 par Vitalii Fedorenko (17469 Points )

0 votes

Très astucieux - la plupart des fonctionnalités fonctionnent sur mon S3, Android 4.0.4, mais pas la recherche/filtre.

Commenté el 24 de Octobre, 2012 par Jens Frandsen

Answer 4

12voto

Jeromy French Points 3969

J'ai vu le film de Sean Haddy excellente solution à une question similaire et a pris la liberté de faire quelques modifications :

Utiliser des classes au lieu d'ID, de sorte qu'un script de jQuery pourrait être réutilisé pour plusieurs tableaux sur une même page
Ajout de la prise en charge des éléments de tableau HTML sémantique tels que caption, thead, tfoot et tbody.
La barre de défilement est désormais facultative, de sorte qu'elle n'apparaît pas dans les tableaux dont la hauteur est inférieure à la hauteur de défilement.
Ajustement de la largeur de la division de défilement pour amener la barre de défilement jusqu'au bord droit du tableau.
Rendre le concept accessible par
- utilisation de aria-hidden="true" sur un en-tête de tableau statique injecté
- et laisser le thème original en place, simplement caché avec jQuery et mis en place aria-hidden="false"
Présentation d'exemples de tableaux multiples de tailles différentes

Sean a fait le gros du travail, cependant. Merci aussi à Matt Burland, qui a souligné la nécessité de soutenir tfoot.

Voyez par vous-même à http://jsfiddle.net/jhfrench/eNP2N/

Répondu el 11 de Octobre, 2012 par Jeromy French (3969 Points )

0 votes

Bon, mais ça foire si on veut un en-tête y un pied de page !

Commenté el 23 de Octobre, 2012 par Matt Burland

3 votes

Merci Matt, j'ai fait l'ajustement.

Commenté el 24 de Octobre, 2012 par Jeromy French

0 votes

L'alignement doit être ajusté si vous affichez les bordures td et th.

Commenté el 1 de Janvier, 2016 par Jakub Langr

Answer 5

10voto

Chris Marasti-Georg Points 17023

Avez-vous essayé d'utiliser thead et tbody, et de définir une hauteur fixe sur tbody avec overflow:scroll ?

Quels sont vos navigateurs cibles ?

EDIT : Cela a bien fonctionné (presque) dans firefox - l'ajout de la barre de défilement verticale a nécessité l'ajout d'une barre de défilement horizontale - beurk. IE a simplement fixé la hauteur de chaque td à ce que j'avais spécifié pour la hauteur de tbody. Voici ce que j'ai pu trouver de mieux :

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>

Répondu el 24 de Septembre, 2008 par Chris Marasti-Georg (17023 Points )

1 votes

Je dois cibler IE6, IE7, FF, ... mais surtout IE malheureusement.

Commenté el 25 de Septembre, 2008 par minty

0 votes

Modifiez le tableau de manière à ce que sa largeur soit inférieure à 100 %, disons 99 %, et le problème devrait être résolu.

Commenté el 30 de Mars, 2009 par WolfmanDragon

2 votes

overflow-x: hidden; y overflow-y: auto aident également.

Commenté el 19 de Mai, 2010 par justkt

Afficher 3 autres commentaires

Answer 6

2voto

Luke Bennett Points 16100

Cela m'a causé d'énormes maux de tête en essayant de mettre en œuvre une telle grille pour une de nos applications. J'ai essayé toutes les techniques existantes, mais elles posaient toutes des problèmes. La solution la plus proche que j'ai trouvée est d'utiliser un plugin jQuery tel que Flexigrid (regardez sur http://www.ajaxrain.com pour des alternatives), mais cela ne semble pas prendre en charge les tableaux larges à 100%, ce qui est ce dont j'avais besoin.

Ce que j'ai fini par faire, c'est rouler le mien ; Firefox prend en charge le défilement. tbody j'ai donc reniflé le navigateur et utilisé les CSS appropriés (en définissant la hauteur, le débordement, etc... demandez si vous voulez plus de détails) pour faire défiler les éléments, et pour les autres navigateurs, j'ai utilisé deux tableaux séparés configurés pour utiliser les éléments suivants table-layout: fixed qui utilise un algorithme de dimensionnement garantissant que la taille indiquée ne sera pas dépassée (les tableaux normaux s'agrandissent lorsque le contenu est trop large pour être adapté). En donnant aux deux tableaux des largeurs identiques, j'ai réussi à aligner leurs colonnes. J'ai enveloppé le second dans un div réglé sur le défilement et, en jouant un peu avec les marges, j'ai obtenu l'aspect et la sensation que je voulais.

Désolé si cette réponse semble un peu vague par endroits ; j'écris rapidement car je n'ai pas beaucoup de temps. Laissez un commentaire si vous voulez que je développe davantage !

Répondu el 24 de Septembre, 2008 par Luke Bennett (16100 Points )

0 votes

Désolé de ressusciter ce vieux fil de discussion, mais j'ai vraiment besoin de savoir comment vous avez résolu ce problème. J'ai réussi à faire fonctionner FF mais pas les navigateurs IE/WebKit. Aidez-moi quand vous le pouvez.

Commenté el 29 de Janvier, 2010 par adaptive

Comment puis-je laisser le corps d'un tableau défiler tout en gardant sa tête fixe ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment puis-je laisser le corps d'un tableau défiler tout en gardant sa tête fixe ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: