I have implemented a scrollable table with a pinned column and vertical and horizontal scrolling enabled. I want to hide the vertical scroll which appears besides the pinned column. Here is the plunker link. My html looks like this:
<div class="col-md-12">
<div class="col-md-3" style="padding:0;">
<table class="table" style="margin-bottom:0;">
<thead>
<tr>
<th>fixed</th>
</tr>
</thead>
</table>
<div style="height:100px; overflow-y:auto" id="fixed" on-scroll="">
<table class="table" style="margin-bottom:0">
<tbody>
<tr data-ng-repeat="data in [1,2,3,4]">
<td>data data data data data data data data</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-9" style="padding:0;overflow:hidden">
<div id="topRight" style="padding:0;overflow-x:hidden" on-scroll="">
<table class="table" style="margin-bottom:0">
<thead>
<tr>
<th style="min-width:200px">column 1</th>
<th style="min-width:200px">column 2</th>
<th style="min-width:200px">column 3</th>
<th style="min-width:200px">column 4</th>
<th style="min-width:200px">column 5</th>
</tr>
</thead>
</table>
</div>
<div style="height:100px; overflow:auto" id="bottomRight" on-scroll="">
<table class="table" style="margin-bottom:0">
<tbody>
<tr data-ng-repeat="data in [1,2,3,4]">
<td style="min-width:200px">data data data data data data data data</td>
<td style="min-width:200px">data data data data data data data data</td>
<td style="min-width:200px">data data data data data data data data</td>
<td style="min-width:200px">data data data data data data data data</td>
<td style="min-width:200px">data data data data data data data data</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Thank you