15

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

EDIT

Thanks for the responses. Is there a way to narrow down the scroll bar to the <tbody> alone so that the <thead> remains static?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
blueren
  • 2,730
  • 4
  • 30
  • 47
  • Instead put style on the div with class panel-body as overflow-y:scroll; height:200px; see demo below in answers. – Anil Panwar Sep 29 '16 at 11:30
  • Do you have a missing end quote on the table class in your source too, or is that just an artifact from cutting down the code here in the question. – Mr Lister Oct 08 '16 at 12:16

3 Answers3

39

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

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

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I checked out the code you shared. This seems to add a scrollbar for the entire panel. I'm looking to have it only for the table. Moving the ```table-responsive``` from panel to `````` doesn't seem to do the trick. – blueren Sep 29 '16 at 15:22
  • 1
    we don't want scroll for table header – Samudrala Ramu Sep 30 '16 at 04:50
  • I'm going with implementing this as it is the cleanest way I've seen to circumvent the current issue. I've tried taking a dig at keeping the header static while body being scrollable but ran into resizing issues. I'm accepting this answer. If I find a better way of doing it, I'll post an answer here. Thanks @ZimSystem – blueren Sep 30 '16 at 05:44
  • 1
    If anyone else lands here wanting to scroll **horizontally** note that: _"Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables."_ – Madbreaks Dec 13 '17 at 01:04
7

Here is the 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>john@example.com</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
 <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
      </div>
    </div>
  </div>
</div>
Anil Panwar
  • 2,592
  • 1
  • 11
  • 24
4

Try It Once I have Given An Example To You 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>
Samudrala Ramu
  • 2,088
  • 1
  • 15
  • 36
  • 1
    Nice. So your approach is to have 2 tables basically, one that represents the `````` and one that represents ``````. I'll give this a shot and see if this works out. Although, I'd somehow prefer them to be a single table! – blueren Sep 29 '16 at 15:42
  • classic issue of the columns not lining up – toddmo Nov 15 '22 at 14:31