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.
InformationsquelleAutor blueren | 2016-09-29