Question

我试图在初始化时设置jQuery数据表中单元格的宽度，但它似乎永远不会起作用。我已经尝试了official site推荐的内容和其他examples。以下是我尝试过的一些选项。请帮助我做错了什么？

Ex：1

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

Ex：2

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

Ex：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百分比值的任何其他用法一样，值必须是某事物的百分比。如果表本身没有定义的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
});

初始化时jquery数据集设置宽度

1 个答案: