Scrollbar on bootstrap table
Solution 1
Wrap it in table-responsive
and set a max-height:
.table-responsive {
max-height:300px;
}
http://www.codeply.com/go/S6MgKWqFvj
Solution 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>
Solution 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>
blueren
Updated on October 09, 2020Comments
-
blueren over 3 years
I have
table
that renders inside apanel
which is inside amodal
. 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 theoverflow-y:auto
oroverflow-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? -
blueren over 7 yearsI 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. -
blueren over 7 yearsNice. 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! -
blueren over 7 yearsThanks Anil. Any way to have the
<thead>
static? -
Anil Panwar over 7 yearsyou can put style position fixed or static.
-
Samudrala Ramu over 7 yearswe don't want scroll for table header
-
blueren over 7 yearsI'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
-
Madbreaks over 6 yearsIf 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."