Jquery datatable scrollX水平不工作

我有以下表格，其中包含10多列。 我使用datatables来显示数据。我使用滚动水平，因为我有很多列。但是卷轴没有出现。请帮忙。这是我桌子的截图

出口ID
门店名称
日期
白天
日间部分
服务
产品
工作人员
害虫
其他
专注
精确
速度
友好
食品处理与卫生
专注
精确
速度
食物
劳动力
故障设备
员工行为
餐厅清洁
行动
#代码继续。。。

这是我的css和滚动脚本

<style>
div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}
</style>


<script>
$(document).ready(function() {
$('#example').DataTable( {
    "scrollY": 300,
    "scrollX": true
} );
} );
</script>

div.dataTables\u包装器{
宽度：800px；
保证金：0自动；
}
$（文档）.ready（函数（）{
$（'#示例'）。数据表（{
“卷轴”：300，
“scrollX”：正确
} );
} );

我需要显示水平滚动，因为我有超过10列。请帮忙。结果应该显示

请检查此项

更改此项：

</tbody>
</tables>

对此

</tbody>
</table>

看看这个

更改此项：

</tbody>
</tables>

对此

</tbody>
</table>

---

您只需在类表中添加

表响应性
。您只需在类表中添加
表响应性
。
使网格
负责任
并使用
CSS样式删除

也可以指定列宽[
宽度：“10%”或宽度：“100px”
]



共享我的代码示例

CSHTML

<div class="row">
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h4>Customers</h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table  table-striped table-hover" id="tblCustomers">
                    <thead>
                        <tr>
                            <th>CustomerId</th>     
                            <th>CustomerName</th>                          
                            <th>#</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


客户
客户ID
客户名称
#


JS文件

   $('#tblCustomers').dataTable({
            "scrollX": true,        
            // other Options
            "columns": [
                { "data": "CustomerId", "title": "Customer Id", "width": "30px", "bSortable": false },
                { "data": "CustomerName", "title": "Name", "width": "250px", "bSortable": false }
            ],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        return "<a data-customerid='" + row.CustomerId+ "' class='btn btn-primary customer-detail' href='#'>Detail</a>"
                    },
                    "targets": [2],
                    "class": "text-center",
                    "width": '70px'
                }
            ]
        });
    }

$（'tblCustomers'）。数据表({
“scrollX”：正确，
//其他选择
“栏目”：[
{“数据”：“客户Id”，“标题”：“客户Id”，“宽度”：“30px”，“bSortable”：false}，
{“数据”：“客户名称”，“标题”：“名称”，“宽度”：“250px”，“bSortable”：false}
],
“columnDefs”：[
{
“渲染”：函数（数据、类型、行）{
返回“”
},
“目标”：[2]，
“类”：“文本中心”，
“宽度”：“70px”
}
]
});
}
使网格
负责任
并使用
CSS样式删除

也可以指定列宽[
宽度：“10%”或宽度：“100px”
]



共享我的代码示例

CSHTML

<div class="row">
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h4>Customers</h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table  table-striped table-hover" id="tblCustomers">
                    <thead>
                        <tr>
                            <th>CustomerId</th>     
                            <th>CustomerName</th>                          
                            <th>#</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>


客户
客户ID
客户名称
#


JS文件

   $('#tblCustomers').dataTable({
            "scrollX": true,        
            // other Options
            "columns": [
                { "data": "CustomerId", "title": "Customer Id", "width": "30px", "bSortable": false },
                { "data": "CustomerName", "title": "Name", "width": "250px", "bSortable": false }
            ],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        return "<a data-customerid='" + row.CustomerId+ "' class='btn btn-primary customer-detail' href='#'>Detail</a>"
                    },
                    "targets": [2],
                    "class": "text-center",
                    "width": '70px'
                }
            ]
        });
    }

$（'tblCustomers'）。数据表({
“scrollX”：正确，
//其他选择
“栏目”：[
{“数据”：“客户Id”，“标题”：“客户Id”，“宽度”：“30px”，“bSortable”：false}，
{“数据”：“客户名称”，“标题”：“名称”，“宽度”：“250px”，“bSortable”：false}
],
“columnDefs”：[
{
“渲染”：函数（数据、类型、行）{
返回“”
},
“目标”：[2]，
“类”：“文本中心”，
“宽度”：“70px”
}
]
});
}
你能创建一个提琴或片段吗？你能创建一个提琴或片段吗？对不起，我没有拼写我的“表格”。还是不行。检查一下小提琴，做得很好。如何实现/合并到我的html中？我完全复制了js和css。仍然没有显示水平滚动条更新的fiddle中有您的代码，那么您必须导入这些库才能工作
https://code.jquery.com/jquery-3.2.1.min.js
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
我有包括所有的需求库。如果我的桌子空了，桌子就可以用了。如果通过数据库获取数据，则不会显示滚动条。如何使其在动态数据表上工作？对不起，我错过了“表”的拼写。还是不行。检查一下小提琴，做得很好。如何实现/合并到我的html中？我完全复制了js和css。仍然没有显示水平滚动条更新的fiddle中有您的代码，那么您必须导入这些库才能工作
https://code.jquery.com/jquery-3.2.1.min.js
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
我有包括所有的需求库。如果我的桌子空了，桌子就可以用了。如果通过数据库获取数据，则不会显示滚动条。如何使其在动态数据表上工作？