Rabinder Bisht
Reputation: 604
Horizontal and vertical Scroll-able table in Bootstrap
I am designing a table using bootstrap, responsive one. Till it has less no. of columns, it was good. With fixed header, it was working fine.
Now, i required more than 20 columns in the table and it should be horizontally scroll-able as well.
I tried to make them work together, for a fixed header table for vertical scroll and horizontal scroll with scroll-able header.
I tried this:
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 150px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed thead>tr>th {
float: left;
border-bottom-width: 0;
}
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed thead>tr>th {
float: left;
border-bottom-width: 0;
}<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="panel panel-default table-responsive">
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>I just added duplicate rows in order to make the table scroll-able. How to make a table scroll-able vertically(with fixed-header) and horizontally(with scroll-able header)?
Upvotes: 9
Views: 22298
Answers (1)
Rabinder Bisht
Reputation: 604
After a while, i got one solution for my query.. Solution to make table scroll-able vertically and horizontally and responsive
$('table').on('scroll', function() {
$("#" + this.id + " > *").width($(this).width() + $(this).scrollLeft());
});html {
font-family: verdana;
font-size: 10pt;
line-height: 25px;
}
table {
border-collapse: collapse;
width: 300px;
overflow-x: scroll;
display: block;
}
thead {
background-color: #EFEFEF;
}
thead,
tbody {
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td,
th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="table-responsive">
<table class="table" id="table1">
<thead>
<tr>
<th>sadasdasdfasdfasfasfasfa#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="table-responsive">
<table class="table" id="table2">
<thead>
<tr>
<th>sadasdasdfasdfasfasfasfa#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Note: Go to the jsFiddle to view it better.
Upvotes: 8
Related Questions
- Bootstrap 3 scrollable div for table
- Horizontal Scroll Table in Bootstrap/CSS
- Make the bootstrap table scroll-able vertically and horizontally with fixed header
- Scrollable table vertical only
- Bootstrap Horizontal Scrollable Table
- Bootstrap 4 responsible table with only vertical scrolling
- Horizontally scrollable table with Twitter bootstrap
- Bootstrap table in div horizontal scroll not work
- Bootstrap table vertical scroll
- Bootstrap 3 table scrollable