Menu
I have developed a table in bootstrap using the "table-responsive" class and it works as expected, however as the table is rather large and will be used on a range of devices I need to make it more user friendly. I have searched the forums but cannot find what I am after.
Is it possible to have the scrollbar which appears at the bottom of responsive table visible at all times and not just when the screen is minimized to a certain extent?
Also is there any way to replicate this scrollbar at the top of the table as well? As the table will be long it would be a better solution to have it visible at the top and bottom.
451
For a horizontal scrollbar on top try using the jquery.doubleScroll plugin
jQuery:
$(document).ready(function(){
$('.table-responsive').doubleScroll();
});
If i get you right. Make the container which the table is in have a fixed with and height, also have the overflow property set to auto. By doing that you table can't be 100% because it will fill its container. That means the table as to have a fixed width also which is larger than it's container to show the overflow effect. See sample below. i hope it helps or point you to the right direction
.table-cont {
max-width: 400px;
max-height: 200px;
overflow: auto;
border: 1px red solid;
}
.table-cont .table {
min-width: 600px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-cont">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
