Table HTML avec des en-têtes fixes et une colonne fixe? [fermé]

y a-t-il une technique CSS/JavaScript pour afficher une longue table HTML telle que les en-têtes de colonne restent fixes sur l'écran et la première colonne reste fixe et font défiler les données.

je veux être en mesure de faire défiler le contenu du tableau, mais pour toujours être en mesure de voir les en-têtes de colonne en haut et la première colonne à gauche.

S'il y a un plugin jQuery ce serait génial! Si elle aide le seul navigateur que j'intéresse Firefox.

56
demandé sur Christopher Rapcewicz 2009-03-26 04:40:29

13 réponses

exemple pratique de lien publié par pranav :

http://jsbin.com/nolanole/1/edit?html,js, sortie

FYI: testé en IE 6, 7, & 8 (mode de compatibilité activé ou désactivé), FF 3 & 3.5, Chrome 2. Pas facile à lire à l'écran (les en-têtes ne font pas partie de la table de contenu).

MODIFIER 5/5/14: déplacement d'un exemple de jsBin. C'est vieux, mais étonnamment fonctionne toujours dans le Chrome actuel, IE, et Firefox (bien que IE et Firefox puissent avoir besoin de quelques ajustements à la hauteur des rangs).

19
répondu acatalept 2014-05-05 16:05:57

le "jQuery DataTables plug-in est un excellent moyen de réaliser des colonnes et des en-têtes fixes de type excel.

notez la section Exemples du site et les"extras".

http://datatables.net/examples/

http://datatables.net/extras /

la section" Extras " comprend des outils pour colonnes fixes et fixe les en-têtes.

colonnes fixes

http://datatables.net/extras/fixedcolumns/

(Je crois que l'exemple de cette page est celui qui convient le mieux à votre question.)

en-tête fixe

http://datatables.net/extras/fixedheader/

(Comprend un exemple avec une mise en page de type tableur pleine page: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html )

3
répondu mg1075 2013-07-13 18:41:24

vous pourriez chercher ce .

il a quelques problèmes connus cependant.

2
répondu green_t 2009-04-03 15:05:04

je vois bien qu'une vieille question, est un très bon endroit pour brancher mon propre script:

http://code.google.com/p/js-scroll-table-header /

il fonctionne simplement sans configuration et est vraiment facile à configurer.

2
répondu raveren 2010-08-13 14:43:39

si ce que vous voulez est d'avoir les en-têtes rester en place pendant que les données dans la table défilent verticalement, vous devriez mettre en œuvre un < tbody> style avec "overflow-y: auto" comme ceci:

<table>
  <thead>
    <tr>
      <th>Header1</th>
       . . . 
    </tr>
   </thead>
   <tbody style="height: 300px; overflow-y: auto"> 
     <tr>
       . . .
     </tr>
     . . .
   </tbody>
 </table>

si le contenu croît plus haut que la hauteur désirée, il commencera à défiler. Cependant, les en-têtes resteront fixes en haut, quelle que soit la position du rouleau.

1
répondu levik 2009-03-26 05:40:09

dans cette réponse, il y a aussi la meilleure réponse que j'ai trouvée à votre question:

tableau HTML avec fixe-têtes?

et basé sur CSS pur .

1
répondu Marco Demaio 2017-05-23 10:31:28

j'ai créé quelque chose qui a un en-tête fixe, un pied de page fixe, une colonne de gauche fixe et aussi une colonne de droite fixe. Cela ne fonctionne bien en IE. Comme la plupart des utilisateurs utilisent encore IE cela peut être utile. S'il vous plaît trouver le code ici dans tableau déroulable . S'il vous plaît laissez-moi vos suggestions.

pendant ce temps je travaille pour fixer les colonnes dans un autre navigateur. Je vous tiendrai au courant. :- )

0
répondu Shahib 2010-09-29 20:30:24
<script>
   $(document).ready(function () {
   $("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
   $("#GridHeader table tbody .rows").remove();
   $('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>

<div id="GridHeader">
    <table></table>
</div>

<div style="overflow: auto; height:400px;">
    <asp:GridView ID="GridView1" runat="server" />
</div>
0
répondu Pat 2011-10-28 18:37:55

pas tout à fait parfait, mais ça m'a permis de me rapprocher de certaines des meilleures réponses ici.

deux tableaux différents, l'un avec l'en-tête, et l'autre, enveloppé d'un div avec le contenu

<table>
  <thead>
    <tr><th>Stuff</th><th>Second Stuff</th></tr>
  </thead>
</table>
<div style="height: 600px; overflow: auto;">
  <table>
    <tbody>
      //Table
    </tbody>
  </table>
</div>
0
répondu Ascherer 2012-02-27 04:05:35

Yui datable

Je ne sais pas si YUI DT a cette fonctionnalité, mais je ne serai pas surpris si c'est le cas.

-1
répondu ksuralta 2009-03-26 09:46:17

je sais que vous pouvez faire pour MSIE et cela a limité l'exemple semble fonctionner pour firefox (pas sûr de la façon extensible, la technique est).

-2
répondu MarkusQ 2009-03-26 01:52:17

la première colonne a une barre de défilement sur la cellule juste au-dessous des en-têtes

<table>
    <thead>
        <th> Header 1</th>
        <th> Header 2</th>
        <th> Header 3</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="width: 50; height:30; overflow-y: scroll"> 
                    Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk 
                    fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
                </div>
            </td>
            <td>
                Hello world
            </td>
            <td> Hello world2
        </tr>
    </tbody>
</table>
-2
répondu Jaime Garcia 2009-03-26 02:00:50

voici un bon plugin jQuery, qui fonctionne sur tous les navigateurs!

vous avez une table d'en-tête fixe Sans fixer sa largeur.

Check it: https://github.com/benjaminleouzon/tablefixedheader

Avertissement: je suis l'auteur du plugin.

-3
répondu bln 2017-05-24 04:48:01