I am trying to make a table horizontally scrollable in the mobile view. For doing this I am using this CSS property
style="overflow-x: auto; display: block; white-space: nowrap;"
But still, a horizontal scroll is not working. Slimscroll plugging is already using in my project. when I remove height (height: 462px; please check in code) which is adding dynamically from its parent div then it starts work but then vertical scroll not works, I can not remove the slim scroll plugin from my project, because it's using widely so how to solve this kindly help me.
Because of security purposes unable to share running code but am using but am sharing some piece of code for understanding.
<div class="ScrollWidgetBody" style="overflow: hidden; width: auto; height: 462px;">
<div class="box-body" style="padding: 10px">
<div class="container-fluid whiteBG clearfix" style="padding: 0px;">
<div class="panel-body" style="padding-top: 0px;">
<div class="ml-datagrid">
<div class="">
<div id="">
<div>
<table class="table " rules="all" border="1" style="
overflow-x: auto;
display: block;
white-space: nowrap;
">
<tbody>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
<tr>
<td align="right" style="width:70px;">
1
</td>
<td align="left">Data</td>
<td align="right" style="width:20px;">data</td>
<td align="left" style="width:120px;">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
<td align="left">data</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If your using only Slimscroll, this does not have horizontal scrollbar.
See here: Reference question.
However i see you can do it using a git fork.
See also here (second answer): Same reference question
If you do not want to use a git fork you can try do it adding bootstrap.
See here again (third answer): Same reference question again