Barre de défilement sur bootstrap table
J'ai table
qui rend l'intérieur d'un panel
qui est à l'intérieur d'un modal
. Comme la table est relativement grande, je tiens à le restreindre de lignes à-dire 5, de sorte que le modal ne devient pas de défilement. J'ouvris DONC et google, et partout je vois que j'ai besoin de régler le overflow-y:auto
ou overflow-y:scroll
à le faire fonctionner, cependant dans mon cas, il ne le fait pas. J'ai aussi mis une hauteur aléatoire de 400px et position:absolute. C'est la table de défilement mais maintenant, le panneau se ferme à l' <thead>
et le corps de la table rend à l'extérieur du panneau. Quelle est la solution à cela?
Mon bout de code est:
<div class="modal fade">
<div class="modal-dialog " >
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-bordered>
<thead>
[........]
</thead>
<tbody style="overflow-y:auto; height:400px; position:absolute>
[.......]
</tbody>
</table>
[...le reste de la </div>
s...]
MODIFIER
Merci pour les réponses. Est-il un moyen de rétrécir en bas de la barre de défilement pour le <tbody>
seulement, de sorte que le <thead>
reste statique?
- Au lieu de mettre le style de la div avec la classe panneau de corps comme overflow-y:scroll; height:200px; voir démonstration ci-dessous dans les réponses.
- Ne vous manque une fin de citation sur la table de la classe dans votre source de trop, ou est-ce juste un artefact de la coupe de la code ici dans la question.
Vous devez vous connecter pour publier un commentaire.
L'envelopper dans
table-responsive
et de définir un max-height:http://www.codeply.com/go/S6MgKWqFvj
table-responsive
à partir du panneau de<tbody>
ne semble pas faire l'affaire.Voici la démo
CSS:
HTML:
<thead>
statique?Essayer une Fois j'ai Donné Un Exemple Pour Vous remettre en Question
CSS:
HTML:
<thead>
et celui qui représente<tbody>
. Je vais donner un coup de cette et voir si cela fonctionne. Bien que, je l'avais en quelque sorte les préfèrent à une seule table!