Scrollable Table with left and right

Scrollable Table with left and right

This Scrollable table has first column fixed and rest of columns horizontal scrollable with native default scrollbar and also left and right sliding options.

You may need to adjust the width as per your design as it’s fixed width currently. And you can adjust width it in responsive screens as per your usage and data display preference.

View:

Responsive Scrollable Table
Responsive Scrollable Table

HTML:

<div>
<table class="w3-table-all table table-bordered table-striped">
<tr>
<th class="fixed">Recommended for </th>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Number</th>
</tr>
<tr>
<td class="fixed">All Infrastructure</td>
<td>Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td class="fixed">Test Runs per Month</td>
<td>Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td class="fixed">Test Scenarios per Run</td>
<td>Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td class="fixed">Test Runs per Month</td>
<td>Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td class="fixed">Test Scenarios per Run</td>
<td>Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
</tr>
</table>
</div>

CSS:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.scroltable.min.css" rel="stylesheet" type="text/css">

body { background-color:#fafafa; font-family:'Roboto';}
div { margin:auto ; width:1000px;}
table { width:1000px; margin:0 0 0 245px;}
table th.fixed, table td.fixed { position:absolute; left:0px; width:250px; z-index:10; background:#fff;}
.scroltable-wrapper { margin:150px 0 0 0;}
.scroltable-nav { opacity:0;}
.scroltable-wrapper:hover .scroltable-nav { opacity:1;}
.scroltable-nav.scroltable-nav-left { left:250px;}
.scroltable-nav.scroltable-nav-left { background:url('../img/arrow-left.png') center center no-repeat rgba(255,255,255,0.8); width:60px; height:60px; top:40%; border-radius:100%; border:1px solid #ddd;}
.scroltable-nav.scroltable-nav-right { background:url('../img/arrow-right.png') center center no-repeat rgba(255,255,255,0.8); width:60px; height:60px; top:40%; border-radius:100%; border:1px solid #ddd;}
@media (min-width:768px) (min-width:991px) {
div { width:95%;}
}
@media (max-width:767px) {
div { width:100%;}
}

jQuery:

<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/jquery.scroltable.min.js"></script>
<script>
$('.w3-table-all').scroltable();
</script>

DemoDownload

You may also like