Javascript 如何解决数据表表头列宽与表体列宽有时不匹配的问题？

使用以下.js文件

• jquery.dataTables.min.js（dataTables 1.10.16）
• dataTables.bootstrap.min.js（dataTables bootstrap 3集成）
• dataTables.responsive.min.js（responsive 2.2.1）
• dataTables.scroller.min.js（scroller 1.4.4）

使用以下.css文件

• jquery.dataTables.min.css
• dataTables.bootstrap.min.css
• responsive.dataTables.min.css
• scroller.dataTables.min.css

---

以下是表格布局：

<table class="table table-responsive table-bordered table-striped table-hover" id="tbl-cat-lvl-two" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Code</th>
            <th>Icon</th>
            <th>Category Label</th>
            <th>Precedence</th>
            <th>Visibility</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

身份证件
代码
偶像
类别标签
优先
可见度
行动

---

以下是表格脚本：

catLvl2table = $('#tbl-cat-lvl-two').DataTable( {
    "processing"    : true,
    "serverSide"    : true,
    "order"         : [[ 4, "asc" ]],
    "responsive"    : true,
    "scrollY"       : "236px",
    "scrollCollapse": true,
    "ajax"          : {
        "url"       : baseUrl+getCatLvl2DataUrl+lvl1CatId,
        "type"      : "POST"
    },
    "columnDefs"    : [
        { "visible"     : false, "targets": [0] },
        { "orderable"   : false, "targets": [0, 2, 5, 6] },
        { 
            className: "align-center check-align-center",
            "targets": [6],
            "render"    : function (data, type, full, meta){
                let id = full.id;
                return `<button href="" class="btn btn-sm btn-info dt-btn-view" data-id="${id}"><i class="fa fa-eye"></i></button><button href="" class="btn btn-sm btn-primary dt-btn-edit" data-id="${id}"><i class="glyphicon glyphicon-pencil"></i></button><button href="" class="btn btn-sm btn-danger dt-btn-del" data-id="${id}"><i class="glyphicon glyphicon-trash"></i></button>`;
            } 
        }
    ],
    "columns": [
        { "data": "id" },
        { "data": "code" },
        { "data": "icon" },
        { "data": "category" },
        { "data": "precedence" },
        { "data": "visibility" },
    ],
});

catLvl2table=$（“#tbl第二类”）。数据表（{
“处理”：对，
“服务器端”：正确，
“订单”：[[4，“asc”]，
“响应”：正确，
“滚动”：“236px”，
“卷轴崩溃”：没错，
“ajax”：{
“url”：baseUrl+getCatLvl2DataUrl+lvl1CatId，
“类型”：“职位”
},
“columnDefs”：[
{“可见”：false，“目标”：[0]}，
{“orderable”：false，“targets”：[0,2,5,6]}，
{ 
类名：“居中对齐检查居中对齐”，
“目标”：[6]，
“呈现”：函数（数据、类型、完整、元）{
设id=full.id；
返回``；
} 
}
],
“栏目”：[
{“数据”：“id”}，
{“数据”：“代码”}，
{“数据”：“图标”}，
{“数据”：“类别”}，
{“数据”：“优先级”}，
{“数据”：“可见性”}，
],
});

---

---

以下是输出：

请有人在这个问题上帮助我……没有人？？/：（（（谢谢..我会尝试那种方式。嘿，我按照你的建议尝试了。宽度不匹配可以通过这种方式解决，但是现在，在td-6:actions中传递[object object]而不是按钮。如何解决？请告诉我。此[object]可能会传递给列数问题。删除完全隐藏的“ID”列（0）。您可以通过“data.id”（objectname.id）处理按钮操作。只需添加“td:eq（5）”。我删除了列[0]：id，并且没有得到[object object]错误。但是，数据id=“${id}”现在没有传递：/

<table class="table table-responsive table-bordered table-striped table-hover" id="tbl-cat-lvl-two" style="width:100%">
    <thead>
        <tr>
            <!-- <th>ID</th> --> //Remove completely this column
            <th>Code</th>
            <th>Icon</th>
            <th>Category Label</th>
            <th>Precedence</th>
            <th>Visibility</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

{ 
    className: "align-center check-align-center",
    "targets": [6],
    "render"    : function (data, type, full, meta){
        let id = full.id;
        return `<button href="" class="btn btn-sm btn-info dt-btn-view" data-id="${id}"><i class="fa fa-eye"></i></button><button href="" class="btn btn-sm btn-primary dt-btn-edit" data-id="${id}"><i class="glyphicon glyphicon-pencil"></i></button><button href="" class="btn btn-sm btn-danger dt-btn-del" data-id="${id}"><i class="glyphicon glyphicon-trash"></i></button>`;
    } 
}

"columns": [
        { "data": "code" },
        { "data": "icon" },
        { "data": "category" },
        { "data": "precedence" },
        { "data": "visibility" },
        { "data" : null,
            className : "align-center" // You should style for this class
        }
],
"rowCallback": function(row, data, index) {
    $('td:eq(5)', row).html(
        '<button href="" class="btn btn-sm btn-info dt-btn-view" data-id="'+data.id+'"><i class="fa fa-eye"></i></button>'+
        '<button href="" class="btn btn-sm btn-primary dt-btn-edit" data-id="'+data.id+'"><i class="glyphicon glyphicon-pencil"></i></button>'+
        '<button href="" class="btn btn-sm btn-danger dt-btn-del" data-id="'+data.id+'"><i class="glyphicon glyphicon-trash"></i></button>'
    );
},

.align-center {
  text-align: center; // whatever you want
}