DataTable 中的响应式表

Question

我的页面如下所示：

我想在页面太小时添加scrollX，所以我必须添加行 scrollX: true

当我添加页面看起来像这样：

DataPicker 在行后面，列的行不在同一行，而是 scrollX 工作（看图片）。当我写入输入和 ajax 加载数据时，该列的行工作正常，但 datapicker 仍然无法工作。我该如何修复它？

代码_table.blade.php

<table class="table table-striped table-bordered" id="policies-table" style="width: 100%;">
    <thead>
        <tr>
            <th>Numer polisy</th>
            <th>Produkt</th>
            <th>Data wystawienia</th>
            <th>Wartość</th>
            <th>Składka</th>
            <th>Wystawiający</th>
            <th>Akcje</th>
        </tr>
    </thead>
</table>

Ajax 加载：

$('#policies-table').DataTable({
    ajax: {url:"url",
    type: "POST",
    'headers': {'X-CSRF-TOKEN': '{{ csrf_token() }}'}},
    processing: true,
    serverSide: true,
    autoWidth: true,
    scrollX: true,
    scrollCollapse: true,
    jQueryUI: true,
    order: [[ 2, "desc" ]],
    ........
});

Answer 1

试试这个$('#policies-table').DataTable({responsive: true} );

或者如果您使用的是引导程序，则不能尝试此操作

<div class='table-responsive'>
    <table class='your classes'>
    </table>
</div>