避免使用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的实际容器类，同时验证您没有固定宽度。你的第一栏似乎比它应该宽得多。