Comment puis-je laisser le corps d'une table défiler mais garder sa tête fixe en place?

j'écris une page où j'ai besoin d'une table HTML pour maintenir une taille définie. J'ai besoin des en-têtes en haut de la table pour y rester en tout temps, mais j'ai aussi besoin du corps de la table pour faire défiler peu importe le nombre de lignes ajoutées à la table. Pensez à une mini version d'excel. Cela semble comme une tâche simple, mais presque toutes les solutions que j'ai trouvées sur le web ont un certain inconvénient. Comment je peux résoudre ça?

142
demandé sur hichris123 2008-09-25 03:21:48

17 réponses

je devais 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é l'exemple #2 qui a bien fonctionné pour moi. Vous aurez à définir la hauteur de la table intérieure avec Java Script, le reste est CSS.

53
répondu Ken Penn 2008-09-29 21:36:36

j'ai trouvé DataTables pour être tout à fait flexible. Alors que sa version par défaut est basée sur jquery, il y a aussi un plugin AngularJs .

34
répondu Vitalii Fedorenko 2014-12-02 03:33:15

j'ai vu Sean Haddy's excellente solution à une question similaire et pris la liberté de faire quelques modifications :

  • utiliser des classes au lieu de ID, donc un script jQuery pourrait être réutilisé pour plusieurs tableaux sur une même page
  • ajouté le soutien pour les éléments de table HTML sémantiques comme la légende, thead, tfoot ,et tbody
  • fait scrollbar optionnel de sorte qu'il n'apparaîtra pas pour les tables qui sont "plus courts" que la hauteur du rouleau
  • Ajusté div défilement de la largeur de ramener la barre de défilement jusqu'au bord droit de la table
  • rendu le concept accessible par
    • utilisant aria-hidden= "true" sur l'en-tête de table statique injectée
    • et en laissant la thead originale en place, juste cachée avec jQuery et set aria-hidden="false"
  • montre des exemples de plusieurs tableaux avec des tailles différentes

Sean a fait le gros du travail. Merci à Matt Burland, aussi, pour avoir souligné le besoin de soutenir tfoot.

s'il vous Plaît voir par vous-même à http://jsfiddle.net/jhfrench/eNP2N/

12
répondu Jeromy French 2017-05-23 12:26:33

avez-vous essayé d'utiliser thead et tbody, et de fixer une hauteur fixe sur tbody avec débordement:scroll?

Quels sont vos navigateurs cibles?

EDIT: cela a bien fonctionné (presque) dans firefox - l'ajout du scrollbar vertical a causé la nécessité d'un scrollbar horizontal ainsi - Beurk. Il suffit de régler la hauteur de chaque td à ce que j'avais spécifié la hauteur du corps à être. Voici le meilleur que j'ai pu trouver: 

<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>
7
répondu Chris Marasti-Georg 2008-09-24 23:30:03

ce dont vous avez besoin est:

1) avoir un corps de table de hauteur limitée que le défilement se produit uniquement lorsque le contenu est plus grand que la fenêtre de défilement. Cependant tbody ne peut pas être dimensionné, et vous devez l'afficher comme un block pour le faire: 

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) Re-synchronisation de la table d'en-tête et corps de table colonnes de largeurs que faire de ce dernier un block a un autre élément. Le la seule façon de le faire est de simuler la synchronisation par en appliquant la même largeur de colonnes aux deux .

Cependant, depuis tbody lui-même est un block maintenant, il ne peut plus se comporter comme un table . Puisque vous avez encore besoin d'un comportement table pour vous afficher les colonnes correctement, la solution est de demander pour chacune de vos lignes d'afficher en tant qu'individu table s: 

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(notez que, en utilisant ce technique, vous ne serez pas en mesure de passer à travers les lignes plus).

une fois cela fait, vous pouvez appliquer les largeurs de colonne pour avoir la même largeur dans les deux thead et tbody . Vous ne pouvez pas que:

  • individuellement pour chaque colonne (par le biais de classes CSS spécifiques ou de style inline), ce qui est assez fastidieux à faire pour chaque instance de table;
  • uniformément pour toutes les colonnes (jusqu'à th, td { width: 20%; } si vous avez 5 colonnes par exemple), ce qui est plus pratique (pas besoin de définir la largeur pour chaque exemple de table) mais ne peut pas fonctionner pour n'importe quel nombre de colonnes
  • uniformément pour n'importe quelles colonnes comptent, à travers une disposition de tableau fixe.

je préfère la dernière option, qui nécessite d'ajouter: 

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

voir une démo ici , biffé de la réponse à cette question .

7
répondu Javarome 2017-09-15 09:00:04

Edit: C'est une très vieille réponse et elle est ici pour la prospérité, juste pour montrer qu'il a été pris en charge une fois de retour dans les années 2000 mais a chuté, car les navigateurs dans la stratégie 2010 de respecter les spécifications du W3C, même si certaines fonctionnalités ont été supprimés: Défilement de la table fixe avec en-tête/pied de page a été maladroitement spécifié avant de HTML5.

Mauvaises nouvelles

malheureusement, il n'y a pas de façon élégante pour table à manier réglable avec fixe thead / tfoot parce que les spécifications HTML/CSS ne sont pas très claires au sujet de cette caractéristique .

explications

bien que HTML 4.01 Spécification dit thead / tfoot / tbody sont utilisés (introduits?) pour faire défiler le corps de la table:

les lignes du tableau peuvent être groupées [...] à L'aide de THEAD, TFOOT et TBODY élément.[ ..]. Cette division permet aux agents utilisateurs de supporter le défilement des corps de table indépendamment de la tête et du pied de la table.

mais la fonctionnalité de table déroulable sur FF 3.6 a été supprimée dans FF 3.7 parce qu'elle est considérée comme un bug parce qu'elle n'est pas conforme aux spécifications HTML/CSS. Voir ce et que commentaires sur FF bugs.

Mozilla Developer Network tip

ci-dessous est une version simplifiée du MDN conseils utiles pour la table scrollable

voir cette page archivée ou la version française actuelle 

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

cependant MDN dit aussi cela ne fonctionne plus sur FF :-(

J'ai aussi testé sur IE8 => tableau n'est pas de défilement :-((

4
répondu olibre 2017-06-09 14:45:17

pas sûr si quelqu'un est encore en train de regarder cela, mais ils chemin que j'ai fait précédemment est d'utiliser deux tables pour afficher la seule table originale - la première juste la ligne de titre de la table originale et pas de lignes de corps de table (ou une ligne de corps vide pour le faire valider).

le second est dans un div séparé et n'a pas de titre et juste les rangées de corps de table d'origine. La div séparée est alors rendue scrollable.

la deuxième table dans sa div est placée juste au-dessous de la première table dans le HTML et il ressemble à une table simple avec un en-tête fixe et une section inférieure scrollable. Je n'ai testé cela qu'en Safari, Firefox et IE (les dernières versions de chacune au printemps 2010) mais cela a fonctionné dans chacune d'elles.

la seule question qu'il avait était que la première table ne serait pas valider sans un organisme (W3.org validator-XHTML 1.0 strict), et quand j'en ai ajouté un sans contenu, il provoque une ligne vide. Vous pouvez utiliser CSS pour rendre cela non visible, mais il encore mange de l'espace sur la page.

3
répondu Mick 2010-08-06 15:47:26

Cette solution fonctionne dans Chrome 35, Firefox 30 et IE 11 (non testé d'autres versions)

Son pur CSS: http://jsfiddle.net/ffabreti/d4sope1u /

tout est réglé pour afficher: bloc, table a besoin d'une hauteur: 

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
3
répondu Fernando Fabreti 2014-09-03 21:45:30

cela m'a causé d'énormes maux de tête en essayant de mettre en œuvre une telle grille pour une application de la nôtre. J'ai essayé toutes les différentes techniques, mais ils avaient tous des problèmes. Le plus proche que j'ai venu était d'utiliser un plugin jQuery tel que Flexigrid (regardez sur http://www.ajaxrain.com pour les alternatives), mais cela ne semble pas supporter des tables 100% larges qui est ce dont j'avais besoin.

ce que j'ai fini par faire était rouler ma propre; Firefox prend en charge le défilement des éléments tbody de sorte que je navigateur reniflé et utilisé CSS approprié (réglage de la hauteur, débordement, etc... demandez si vous voulez plus de détails) pour faire ce rouleau, et puis pour les autres navigateurs, j'ai utilisé deux tables séparées définies pour utiliser table-layout: fixed qui utilise un algorithme de taille qui est garanti de ne pas déborder la taille indiquée (tables normales se développera lorsque le contenu est trop large pour s'adapter). En donnant aux deux tables des largeurs identiques, j'ai pu aligner leurs colonnes. J'ai emballé la seconde une dans une div définie à faire défiler et avec un peu de jiggery pokery avec marges etc réussi à obtenir le regard et le sentiment que je voulais.

Désolé si cette réponse est un peu vague dans les lieux; je suis en train d'écrire rapidement que je n'ai pas beaucoup de temps. Laissez un commentaire si vous voulez m'étendre davantage!

2
répondu Luke Bennett 2008-09-24 23:30:16

voici un code qui fonctionne vraiment pour IE et FF (au moins): 

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

j'ai changé le code d'origine pour le rendre plus clair et aussi pour le mettre qui fonctionne bien dans IE et aussi FF..

code Original ici

2
répondu Daniel Costa 2011-01-24 19:34:01

Voici mon alternative. Il utilise également différentes DIVs pour l'en-tête, le corps et le pied de page, mais synchronisé pour le redimensionnement des fenêtres et avec la recherche, le défilement, le tri, le filtrage et le positionnement:

Mes listes de CD

cliquez sur le Jazz, classique... boutons pour voir les tables. Il est conçu pour être adéquat même si JavaScript est désactivé.

semble correct sur IE, FF et WebKit (Chrome, Safari).

1
répondu goneill 2011-04-01 02:57:37

Désolé.t lire toutes les réponses à votre question.

Ouais, voici la chose que vous voulez (je l'ai déjà fait)

vous pouvez utiliser deux tables, avec le même nom de classe pour un style similaire, une seule avec la tête de table et une autre avec vos rangées. Maintenant, mettez cette table à l'intérieur d'un div ayant la hauteur fixe avec débordement-y:auto ou scroll.

1
répondu Sanuj 2012-07-19 11:12:38

le principal problème que j'ai eu avec les suggestions ci-dessus était de pouvoir brancher tablesorter.js et être capable de faire flotter les en-têtes pour une table limitée à une taille max spécifique. Je suis finalement tombé sur le plugin jQuery.floatThead qui a fourni les en-têtes flottantes et a permis au tri de continuer à travailler.

il a également une page de comparaison agréable se montrant vs plugins similaires .

1
répondu Guy Hollington 2012-11-22 04:34:37

Live JsFiddle

il est possible avec seulement HTML & CSS 

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
1
répondu Rafee Muhammad 2017-02-24 08:16:55

si vous êtes d'accord pour utiliser JavaScript, voici ma solution Créer un jeu de table Largeur fixe sur toutes les colonnes (pixels!) ajouter la classe Scrollify à la table et ajouter ce javascript + jquery 1.4.x définit la hauteur en css ou style!

testé dans: Opera, Chrome, Safari, FF, IE5.5 ( Epic script fail ), IE6, IE7, IE8 ,IE9 

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

modifier: hauteur fixe.

0
répondu Peter 2011-04-20 08:08:10

je le fais avec javascript (pas de bibliothèque) et CSS - le corps de la table scrolls avec la page, et la table ne doit pas être fixe la largeur ou la hauteur, bien que chaque colonne doit avoir une largeur. vous pouvez également garder la fonctionnalité de tri.

en gros:

  1. corps de table, aussi créer un "masque" div cacher le corps de table comme il défile l'en-tête

  2. dans CSS, convertir les parties de table en blocs

  3. en Javascript, obtenir la largeur de la table et correspondre à la largeur du masque... obtenir la hauteur du contenu de la page... mesure de la position du rouleau... manipuler CSS pour définir la position de la ligne d'en-tête de la table et le masque hauteur

voici le javascript et un jsfiddle DEMO. 

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
0
répondu Deborah 2013-07-03 23:10:53

pour moi, rien de relié au défilement n'a vraiment fonctionné jusqu'à ce que j'ai enlevé la largeur de la table CSS. À l'origine, la table CSS ressemblait à ceci: 

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

dès que j'ai retiré la largeur:100%; Toutes les fonctionnalités de défilement ont commencé à fonctionner.

0
répondu Matthew Park 2016-07-26 13:34:57