I have table that renders inside a panel which is inside a modal. As the table is relatively large, I'd like to restrict it's rows to say 5 so that the modal does not become scrollable. I looked through SO and google and everywhere I see that I need to set the overflow-y:auto or overflow-y:scroll to get it to work, however in my case, it does not. I also set a random height of 400px and position:absolute. This got the table to be scrollable but now the panel closes with the <thead> and the body of the table renders outside the panel. What's the fix to this?
My code snippet is:
<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 the </div>s...]
Thanks for the responses. Is there a way to narrow down the scroll bar to the <tbody> alone so that the <thead> remains static?
Wrap it in table-responsive and set a max-height:
.table-responsive {
max-height:300px;
}