Home page scroll bar

Question

I have a table that displays inside a panel that is inside modal . Since the table is relatively large, I would like to limit its rows to say 5 so that the modality does not become scrollable. I looked at SO and google and everywhere I see that I need to set overflow-y:auto or overflow-y:scroll in order for it to work, but in my case it is not. I also set an arbitrary height of 400 pixels and position: absolute. This allowed us to scroll through the table, but now the panel is closed with <thead> , and the body of the table is displayed outside the panel. What is the fix for this?

My code snippet:

 <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> 

[... the rest of </div> s ...]

---

EDIT

Thanks for answers. Is there a way to narrow the scrollbar to <tbody> alone so that <thead> remains stationary?

Answer 1

Wrap it in table-responsive and set max-height:

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

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

Answer 2

Here is a demo

 #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> [e-mail] </td> </tr> <tr> <td>John</td> <td>Doe</td> <td> [e-mail] </td> </tr> <tr> <td>John</td> <td>Doe</td> <td> [e-mail] </td> </tr> <tr> <td>John</td> <td>Doe</td> <td> [e-mail] </td> </tr> <tr> <td>John</td> <td>Doe</td> <td> [e-mail] </td> </tr> <tr> <td>John</td> <td>Doe</td> <td> [e-mail] </td> </tr> <tr> <td>John</td> <td>Doe</td> <td> [e-mail] </td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td> [e-mail] </td> </tr> <tr> <td>July</td> <td>Dooley</td> <td> [e-mail] </td> </tr> </tbody> </table> </div> </div> </div> </div> 

Answer 3

Try it as soon as I give you an example.

 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>