Comment afficher la barre de défilement sur un tableau html
Je suis en train d'écrire une page où j'ai besoin d'une page html afin de maintenir un ensemble de taille. J'ai besoin de les en-têtes au-dessus de la table pour y rester en tout temps, mais j'ai aussi besoin du corps de la table pour faire défiler n'importe comment beaucoup de lignes sont ajoutées à la table.
Je veux qu'il ressemble à la méthode 2 de cette url: http://www.cssplay.co.uk/menu/tablescroll.html
J'ai essayé de faire cela, mais pas de barre de défilement s'affiche:
<table border=1 id="qandatbl" align="center">
<tr>
<th class="col1">Question No</th>
<th class="col2">Option Type</th>
<th class="col1">Duration</th>
</tr>
<tbody>
<tr>
<td class='qid'></td>
<td class="options"></td>
<td class="duration"></td>
</tr>
</tbody>
</table>
CSS:
tbody {
height:80em;
overflow:scroll;
}
- Pourquoi n'utilisez-vous pas le code à partir de l'exemple de la méthode? Vous ne pouvez pas utiliser
<tbody>
malheureusement.
Vous devez vous connecter pour publier un commentaire.
Quelque chose comme cela?
http://jsfiddle.net/TweNm/
L'idée est d'envelopper le
<table>
dans un non-statique placé<div>
qui a unoverflow:auto
propriété CSS. Puis placer les éléments dans la<thead>
absolument.CSS:
HTML:
Accepté la réponse a fourni un bon point de départ, mais si vous le redimensionner, modifier la largeur des colonnes, ou même de changer les données de la table, les en-têtes obtenir foiré dans diverses manières. Tous les autre exemple que j'ai vu a des problèmes similaires, ou impose des restrictions sérieuses sur la table de la mise en page.
Je pense que j'ai enfin tous ces problèmes ont été résolus, bien que. Il a fallu un beaucoup de CSS, mais le produit final est à peu près aussi fiable et facile à utiliser comme un tableau normal.
Voici un exemple qui possède toutes les fonctionnalités requises pour reproduire la table référencée par l'OP: jsFiddle
Les couleurs et les frontières devrait être modifié pour le rendre identique à la référence. Des informations sur la façon de faire ces types de changements dans le CSS commentaires.
Voici le code:
CSS:
HTML:
<tr><th></th>..</tr>
construire de toute évidence ne fonctionne pas. Merci.Vous devez insérer votre tableau dans un div qui il a une taille fixe, et en div style, vous avez à mettre overflow:scroll.
J'ai résolu ce problème en séparant le contenu de mon en deux tables.
Une table est la ligne d'en-tête.
La secondes est également
<table>
tag, mais enveloppé par<div>
avec hauteur statique de dépassement et de les faire défiler.Intéressant de noter, qu'en fonction de votre objectif (le mien était le remplissage automatique des résultats d'une barre de recherche), vous pouvez la hauteur variable, et pour la barre de défilement pour n'exister que si la hauteur dépasse.
Si vous voulez, remplacer
height: x;
avecmax-height: x;
, etoverflow:scroll
avecoverflow:auto
.En outre, vous pouvez utiliser
overflow-x
etoverflow-y
si vous le souhaitez, et, évidemment, la même chose travaille horizontalement avecwidth : x;
Si vous arrivez à un point où toutes les solutions mentionnées ne fonctionnent pas (comme il a obtenu pour moi), faites ceci:
Comme cela, dans votre
HTML
Puis le style de la seconde table parent pour permettre de défilement verticale, dans votre
CSS