Comment spécifier la table de hauteur telle qu'une barre de défilement verticale apparaît?

J'ai un tableau avec le nombre de lignes sur ma page. Je voudrais mettre de la table hauteur de, dire pour 500px, de telle sorte que si la hauteur de la table est plus grande que cela, une barre de défilement verticale apparaîtra. J'ai essayé d'utiliser CSS height attribut sur la table, mais il ne fonctionne pas.

  • Peut-être que l'utilisation max-height au lieu de simplement height que cette dernière s'en vigueur de la table hauteur de 500px
  • Vous pouvez poser une deuxième question, sur le fait de garder la ligne d'en-tête de défilement. 😉
  • Voir aussi stackoverflow.com/questions/1587927/...
InformationsquelleAutor Misha Moroshko | 2010-12-16
  1. 152

    Essayez d'utiliser le overflow propriété CSS. Il y a également des propriétés distinctes pour définir le comportement de l'horizontale débordement (overflow-x) et débordement vertical (overflow-y).

    Puisque vous voulez seulement le défilement vertical, essayez ceci:

    table {
  height: 500px;
  overflow-y: scroll;
}

    EDIT:

    Apparemment <table> éléments ne respectent pas les overflow de la propriété. Cela semble être parce que <table> éléments ne sont pas rendus comme display: block par défaut (en fait ils ont leur propre type d'affichage). Vous pouvez forcer le overflow propriété par la mise en au <table> d'un élément de type block:

    table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

    Noter que ce sera la cause de l'élément pour avoir 100% de largeur, donc si vous ne voulez pas prendre toute la largeur horizontale de la page, vous devez spécifier explicitement la largeur de l'élément en tant que bien.

    • Cela ne veut pas limiter la hauteur si.
    • Je pensais que c'était implicite, mais vous avez raison. J'ai ajouté une explicite height bien à mon exemple.
    • Cela ne fonctionne pas: jsfiddle.net/TSGSA
    • Non, il n', vous avez juste besoin display:block sur la table pour qu'elle se comporte comme une div jsfiddle.net/TSGSA/1
    • Cela semble être parce que les tables ne sont pas les éléments de bloc. Voir mon edit.
    • Les grands esprits se rencontrent. J'ai mis à jour ma réponse pendant que vous étiez en commentant. 🙂
    • Merci beaucoup!!
    • Vous êtes la bienvenue. Heureux de vous avoir aidé.
    • Il arrive régulièrement sur DONC, mais toujours impressionnant. 😛
    • Cette réponse m'a vraiment aidé, mais au lieu de l'appliquer à la balise table, il doit être fait à la tbody, afin de permettre à l'en-tête de rester statique lors du défilement. Ensuite, il y a un peu de style à trier à l'égard de la région dans le thead qui est au-dessus de la barre de défilement.
    • Cela ne fonctionne pas avec IE8 ou IE9. jsfiddle.net/TSGSA/1
    • Je sais que c'est incroyablement en retard, mais je viens de voir ce (eu quelques rep sur elle et se souvint qu'il existait). Il semble que vous pouvez résoudre ce problème en définissant le CSS sur la tbody et notamment position:absolute (vous devrez peut-être définir l'élément de la table elle-même à position:relative pour l'ancrage de l'tbody afin de ne pas se rendait dans un étrange endroit). Il semble que vous aurez besoin de définir explicitement la largeur à 100% pour correspondre à l'original de la réplique. Je viens de jouer avec cette pour 5 minutes dans un IETester (IE9 seulement), de sorte qu'il peut ne pas être complète et il peut ne pas fonctionner correctement sur réel IE9 ou à tous sur IE8.
    • Voici la mise à jour du violon. Laissez-moi savoir si cela fonctionne et je vais mettre à jour la réponse. Je vais essayer de le tester correctement demain. jsfiddle.net/TSGSA/113
    • Si vous allez l'utiliser sur le tbody, assurez-vous d'ajouter le display:block pour le thead (et probablement tfoot) ou ils pourraient aller un peu fou. Le problème, il semble, est qu'une fois que vous faites cela, vous avez rompu le lien entre le thead et tbody: les colonnes de l'ancien ne sont pas conscients de la largeur de ce dernier. Si vous patch et en bas de la pente glissante qui vous allez. "Je suis mort pour la beauté..."
    • Pour une raison que Chrome a besoin d'un <!doctype html>, ou il ignore la overflow.

    InformationsquelleAutor AgentConundrum
  2. 54

    Vous avez besoin de mettre la table à l'intérieur d'un autre élément et réglez la hauteur de l'élément. Exemple avec du css:

    <div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>
    • Cela ne permettra pas de garder le thead en place alors que le tbody parchemins.
    • Cette exigence n'est pas dans la question d'origine.
    • Cette méthode fonctionne dans IE
    • Aussi, l'autre (accepté) réponse ne gardez pas le thead en place soit.
    • Vous pouvez toujours faire, il semble y avoir un en-tête en place avec cette méthode. Vous masquer la table d'en-tête, puis créer un deuxième tableau au-dessus de la première table qui a la tête dans les il. Ensuite, le style de deux tables d'avoir display:table; leurs lignes ont display:table-row; et de leurs cellules ont display:table-cell; et les deux tables correspondent et semblent en être un. (NOTE: cela ne fonctionne pas avec de très grandes tables; en gros, elle correspond à leur place quand il le peut. J'ai utilisé cette technique à plusieurs reprises.)
    • Est-il un moyen de le faire avec le pourcentage de la hauteur? Je ne veux pas utiliser un pixel fixe la hauteur, quand le reste de la page est réactif, mais cette méthode semble fonctionner avec hauteur fixe. J'ai précisé que la hauteur maximale de chaque TD et TR en pixels dans une tentative pour éliminer toute dépendance circulaire dans le calcul de la taille mais toujours pas de joie.
    • Assurez-vous. Le parent taille doit être spécifiée à utiliser des tailles relatives. Par exemple: jsfiddle.net/hz8wy
    • Merci! Est-ce à dire tout ce qui se passe en arrière de l'élément racine (le <HTML> tag) il est spécifié manuellement "height=100%", par exemple? Je l'ai essayé et il limite en effet la taille de la table -- en fait, il écrasé dans une petite boîte de défilement, peut-être parce que j'avais laissé les choses comme "height=4%" dans plusieurs DIVs pour le test et j'ai oublié parce qu'ils n'avaient aucun effet. Espérons que l'on peut forcer un pourcentage de la taille de la table (ou de sa mère div) sans avoir à se restreindre et d'indiquer les tailles de tous les ancêtres qui serait lourd 😀
    • Oui, à ma connaissance, de tout élément qui utilise une taille relative doivent avoir un parent qui a une taille explicite spécifiée. Si ce parent est relative-de la taille, de sa société mère doit également avoir une taille tout le chemin jusqu'à la html élément. Pour des raisons pratiques, le html de l'élément parent peut être considéré comme de la fenêtre, qui n'est pas de taille relative.
    • parfait!!!! aaaaa

    InformationsquelleAutor Dark Falcon
  3. 2

    pour régler la hauteur de la table, vous devez tout d'abord définir une propriété css "display: block"
    ensuite, vous pouvez ajouter "largeur/hauteur" propriétés. Je trouve ce Mozilla Article une très bonne ressource pour apprendre à tables de style :
    Lien

    InformationsquelleAutor krupesh Anadkat