jQuery DataTable 太宽，宽度不会更新答案

【问题标题】：jQuery DataTable too wide, width will not updatejQuery DataTable 太宽，宽度不会更新
【发布时间】：2021-04-20 01:31:08
【问题描述】：

我被分配到一个项目，我正在使用 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 手动设置表格的大小（再次抱歉，我不得不混淆 th 标签之间的名称）：

    <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 上查看了一些问题，但我仍然无法弄清楚我的问题，我不知道我是否只是不明白我需要问什么，或者是否只是我没有在这里做的事情。

提前致谢！

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

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

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

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

是否可能内容很长，但您仍想使用固定宽度？如果是这样，添加到您的 CSS：

表格布局：固定；

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

还有一点：不建议禁用“自动宽度” - 可能会导致列布局出现问题。

【讨论】：