Scrollbar on bootstrap table

Question

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?

Quetzal

Instead put style on the div with class panel-body as overflow-y:scroll; height:200px; see demo below in answers. – Fiendish

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. – Beanery

Answer 1

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

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

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

Fotina

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 <tbody> doesn't seem to do the trick. – Quetzal

we don't want scroll for table header – Barabbas

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

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." – Stichter

Answer 2

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

Fiendish

Thanks Anil. Any way to have the <thead> static? – Quetzal

you can put style position fixed or static. – Fiendish

@AnilPanwar, no that doesn't work. Fixed puts it over the middle of the table and static has no effect (on THEAD) – Oldtimer

Answer 3

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>

Barabbas

Nice. So your approach is to have 2 tables basically, one that represents the <thead> and one that represents <tbody>. I'll give this a shot and see if this works out. Although, I'd somehow prefer them to be a single table! – Quetzal

classic issue of the columns not lining up – Oldtimer

Answer 4

Try It Once I have Given An Example To You Question : CSS Code :

thead{
    background:red;
}
.table-responsive .table thead, .table-responsive .table tbody tr {
    display: table;
    width: 100%; /* Width of the parent */
    table-layout: fixed; /* Optional: Helps in equal column width */
}

.table-responsive .table tbody {
    display: block;
    max-height: 200px; /* Adjust this value to your needs */
    overflow-y: auto;
    overflow-x: hidden;
}

.table-responsive .table {
    width: 100%;
    min-width: 630px; /* Adjust based on your content and layout */
}

HTML Code :

<!-- for better design/ui you can use bootstrap library -->
<div class="table-responsive" style="float: left; width: 33.33%;">
    <h4 class="text-center">Testing Demo</h4>
    <table class="table" id="RecipeIngredientTable2">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>No of Delivery</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody class="tbody-scroll">
            
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr><tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
                <tr>
                    <td class="text-center">23</td>
                    <td class="text-center">ABC</td>
                    <td class="text-center">Dummy</td>
                    <td class="text-center">Not Applicable</td>
                </tr>
            
        </tbody>
    </table>
</div>

Coenesthesia

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Charbonneau