php - DataTable 中的响应表

Question

我的页面是这样的:

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

当我添加页面时如下所示:

DataPicker 在行的后面，列的行不在同一行，但 scrollX 工作(看图片)。当我写入输入和 ajax 加载数据时，那一行列工作正常但数据选择器仍然无法工作。我该如何修复？

代码_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} );

或者如果你正在使用 bootstrap，你不能尝试这个

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