jQuery DataTable 太宽，宽度不会更新

Question

我被分配到一个项目，在该项目中我使用 jQuery DataTables 从数据库中获取信息并将其显示在屏幕上。

这是应用程序的附加屏幕截图（我不得不审查其中的一些字段名称和一些数据，我很抱歉）

我尝试在按钮渲染后的位上使用 sWidth: 50px 手动设置表格列的宽度：

$(document).ready(function () {
table = $("#customerDatatable").DataTable({
    "processing": true,
    "serverSide": true,
    "filter": true,
    "ajax": {
        "url": "/api/customer",
        "type": "POST",
        "datatype": "json"
    },
    "columnDefs": [{
        "targets": 0,
        "visible": false,
        "searchable": false,
        "defaultContent": "NULL"
    }],
    "columns": [

        { "data": "dbField", "name": "Id", "autoWidth": false },
        {
            "render": function (data, row) {
                //return "<a href='#' class='btn btn-danger' onclick=DeleteCustomer('" + row.id + "'); >Delete</a>";
                return "<a id='offcanvasButton' class='btn btn - primary' data-bs-toggle='offcanvas' href='#offcanvasExample' role='button' aria-controls='offcanvasExample'>Link with href</a >";
            }

        },
        { "data": "dbField", "name": "dbField", "sWidth": "50px", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },
        { "data": "dbField", "name": "dbField", "autoWidth": false },

    ]
});

然后我还尝试通过 HTML 手动设置表格的大小（再次抱歉，我不得不混淆标签之间的名称）：

    <div width="100%" style="margin:0 auto;">
    <table id="customerDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="75%" cellspacing="0">
        <thead>
            <tr>

                <th>ThName</th>
                <th>Actions</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>
                <th>ThName</th>


            </tr>
        </thead>
    </table>
</div>

尽管查看了 Stack Overflow 上的几个问题，我仍然无法弄清楚我的问题，我不知道我是否只是不明白我需要问什么，或者是否只是有什么我没有在这里做。

提前致谢！

Answer 1

我也遇到同样的问题，通过设置解决了

td {
    white-space: pre-wrap !important;
    word-wrap:break-word;
}

Answer 2

我看到有关于这个主题的数据表的讨论。 https://datatables.net/forums/discussion/41870/column-width-not-working

据我所知，如果您想固定列的宽度，有一个解决方案。

DataTables 中列宽的工作方式是 DataTables 在初始化时会创建一个“最坏情况”表。 这意味着您提供的宽度已被使用，但如果表格的内容不适合它们，或者它们没有正确添加，则浏览器和 DataTables 将否决您并仅使用宽度作为指导。

有没有可能内容很长但你仍然想使用固定宽度？ 如果是这样，请添加到您的 css 中：

表格布局：固定；

查看 Alan 对讨论的评论，了解更多信息，他是管理员。

还有一件事：不建议禁用“autowidth” - 可能会导致列布局出现问题。

Answer 3

DataTables 配置对象中的设置

autoWidth: false

为我解决了这个问题。