【发布时间】：2021-02-03 15:16:51
【问题描述】：
我正在尝试使表格在移动视图中水平滚动。为此，我使用了这个 CSS 属性
style="overflow-x: auto; display: block; white-space: nowrap;"
但是，水平滚动仍然不起作用。 Slimscroll 插件已经在我的项目中使用。当我删除从其父 div 动态添加的高度（高度：462px；请检查代码）然后它开始工作但垂直滚动不起作用时，我无法从我的项目中删除超薄滚动插件，因为它正在广泛使用所以如何解决这个问题请帮助我。
出于安全考虑，无法共享正在运行的代码，但正在使用但正在共享一些代码以供理解。
<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>
【问题讨论】：
标签： html css horizontal-scrolling slimscroll