使用 JQuery DataTable 插件避免水平滚动

Question

如何在使用JQuery DataTable插件的表格中设置列宽以避免水平滚动？

我尝试过的

var table = $(data.datatable.container).DataTable({
                    dom: "frtiS",
                    "columnDefs": [{ "width": "5%", "targets": 0 }],
                    autoWidth: false,                    
                    scrollX": false,
                    scrollY: "250px",
                    paging: true,
                    order: true,
                    language: {
                        info: data.datatable.info,
                        search: data.datatable.language.search,
                        zeroRecords: data.datatable.language.zeroRecords,
                        emptyTable: data.datatable.language.emptyTable,
                        infoEmpty: data.datatable.language.infoEmpty,
                        infoFiltered: data.datatable.language.infoFiltered,
                        loadingRecords: data.datatable.language.loadingRecords,
                        processing: data.datatable.language.processing,
                        paginate: {
                            first: data.datatable.language.paginate.first,
                            previous: data.datatable.language.paginate.previous,
                            next: data.datatable.language.paginate.next,
                            last: data.datatable.language.paginate.last
                        }
                    }
                });

但是没用

表格

<table id="tabelaVendedorPorEstado" style="overflow-x: hidden;" class="table tabelaListagemVendedores">
            <thead>
                <tr>
                    <th>Vendedores</th>
                    <th>Valor</th>
                    <th>%</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <!-- Some TR TD here -->
            </tbody>
        </table>

Answer 1

你可以尝试像这样用纯 css 修复它：

div.container {
    width: 95%;
}

匹配您的 DataTables 的实际容器类，同时验证您没有固定宽度。您的第一列似乎比应有的要宽得多。