jquery数据表在初始化时设置宽度

Question

我试图在初始化时在 jQuery 数据表中设置单元格的宽度，但它似乎永远无法工作。我已经尝试过official site 和其他examples 的建议。以下是我尝试过的一些选项。请帮忙看看我做错了什么？

例如：1

$('#dataTables-comments').DataTable({
    "bLengthChange": false,
    "bFilter": false,
    "iDisplayLength": 5,
    "aoColumns": [{
            "sWidth": "50%"
        }, 
        {
            "sWidth": null
        },  
        {
            "sWidth": null
        },   
        {
            "sWidth": null
        },   
        {
            "sWidth": null
        }   
    ],
    "responsive": true
});

例如：2

$('#dataTables-tbl').DataTable({
    "bLengthChange": false,
    "bFilter": false,
    "iDisplayLength": 5,
    "columnDefs": [{
        "width": "50%",
        "targets": 0
    }],
    "responsive": true
});

例如：3

$('#dataTables-tbl').DataTable({
    "bLengthChange": false,
    "bFilter": false,
    "iDisplayLength": 5,
    "columns": [{
        "width": "50%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }],
    "responsive": true
});

Answer 1

与 CSS 百分比值的任何其他用法一样，该值必须是 something 的百分比。如果表本身没有定义width，则10% 是不可翻译的。所以给你的桌子一个width：

#dataTables-comments {
  width: 800px;
}

并确保关闭autoWidth，这样dataTables 就不会开始推翻预定义的列宽：

$('#dataTables-tbl').DataTable({
    autoWidth: false, //<---
    "bLengthChange": false,
    "bFilter": false,
    "iDisplayLength": 5,
    "columns": [{
        "width": "50%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }],
    "responsive": true
});