web-dev-qa-db-fra.com

Barre de défilement sur la table d'amorçage

J'ai table qui rend l'intérieur d'une panel qui est à l'intérieur d'une modal. Comme le tableau est relativement grand, j'aimerais limiter le nombre de lignes à 5, de sorte que le modal ne puisse pas défiler. J'ai parcouru SO et Google, et je constate partout que je dois définir le overflow-y:auto ou le overflow-y:scroll pour que cela fonctionne, mais dans mon cas, ce n'est pas le cas. J'ai également défini une hauteur aléatoire de 400 px et une position: absolue. Cela a rendu la table défilable, mais maintenant le panneau se ferme avec le <thead> et le corps du tableau est rendu en dehors du panneau. Quelle est la solution à cela? 

Mon extrait 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 du </div>s ...]

MODIFIER

Merci pour les réponses. Existe-t-il un moyen de réduire la barre de défilement au <tbody> seul afin que le <thead> reste statique?

htmlcsstwitter-bootstrapresponsive-designbootstrap-table
8
blueren

Enveloppez-le dans table-responsive et définissez une hauteur maximale:

.table-responsive {
    max-height:300px;
}

http://www.codeply.com/go/S6MgKWqFvj

14
Zim

Voici la démo

#collapse1{
overflow-y:scroll;
height:200px;
  <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Collapsible List with table</h2>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Collapsible list group with table</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody  >
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
      </div>
    </div>
  </div>
</div>

4
Anil Panwar

Essayez-le une fois que je vous ai donné un exemple Question 

table,tr,th,td{
  border:1px solid #dddddd;
  border-collapse:collapse;
}
.tbl-header{
  width:calc(100% - 17px);
  width:-webkit-calc(100% - 17px);
  width:-moz-calc(100% - 17px);
}
<div class="tbl-header">
<table style="width:100%;">
  <thead>
<tr>
 <th width="50%">1</th>
  <th width="50%">2</th>
 </tr>
 </thead>
</table>
  </div>
<div style="width:100%;overflow:auto; max-height:100px;">
   <table style="width:100%;">
     <tr>
     <td width="50%">dsada</td>
       <td width="50%">dsadas</td>
     </tr>
     <tr>
     <td>dsada</td>
       <td>dsadas</td>
     </tr>
     <tr>
     <td>dsada</td>
       <td>dsadas</td>
     </tr>
     <tr>
     <td>dsada</td>
       <td>dsadas</td>
     </tr>
     <tr>
     <td>dsada</td>
       <td>dsadas</td>
     </tr>
     <tr>
     <td>dsada</td>
       <td>dsadas</td>
     </tr>
    
    </table>
   </div>

2
Samudrala Ramu