0

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>
Martin Brisiak
  • 2,957
  • 12
  • 32
  • 48
rahul
  • 1

1 Answers1

0

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

Harif Baena
  • 1
  • 4