When using jquery.dataTable, the header is not aligned with the content. Please take a look at it.

var t = $("-sharplxu_dr_table").dataTable({
        data: returnData,
        language: trans(),
        sDom: ""top"i",
        "scrollX": true,
        // paging:true,//
        pageLength: 10,
        autoWidth: true,
        destroy: true,
        info: true,
        columns:[{"data": "dept",title: "", },
            {"data": "mb",title: "", },
            {"data": "zgjy",title: "",
                render: function (data, type, row, meta) {
                    return "<a href="-sharp" onclick="showDetail($(this))" title="" + data +" " class=""+row.id+"">" + data + "</a>";// a<span>
                }},
            {"data": "item1",title: "",},
            {"data": "item2",title: "",},
            {"data": "item3",title: "",},
            {"data": "item4",title: "",},
            {"data": "item5",title: "",},
            {"data": "item5",title: "",visible:getDept()},
            {"data": "item6",title: "",
                render: function (data, type, row, meta) {
                    return "<a href="-sharp" onclick="showMerge($(this))" title="" + data +" " class=""+row.id+"">" + data + "</a>";
                }},
            {"data": "item6",title: "",svisible:getDept(),
                render: function (data, type, row, meta) {
                    return "<a href="-sharp" onclick="showSendBack($(this))" title="" + data +" " class=""+row.id+"">" + data + "</a>";
                }},
            {"data": "item7",title: "",},
            {"data": "item8",title: "1",},
            {"data": "item9",title: "2",},
            {"data": "item10",title: "",},
            {"data": "item7",title: "",},
            {"data": "item8",title: "",},
            {"data": "item9",title: "",},
            {"data": "item10",title: "",},
            {"data": "item10",title: "",},
            {"data": "item7",title: "",},
            {"data": "item8",title: "",},
            {"data": "item9",title: "",},
            {"data": "item10",title: "",},
            {"data": "id",visible: false}] ,
        /* //
         "fnDrawCallback": function () {
             this.api().column(0).nodes().each(function (cell, i) {
                 cell.innerHTML = i + 1;
             });
         },*/
        //
        columnDefs: [{
            "targets": [0, 1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13],
            "data": "culture_title",
            "render": function (data, type, full) {
                return "<span title="" + data + "">" + data + "</span>";// a<span>

            }
        }
            /* {
                 "targets": [2],
                 "data": "culture_title",
                 "render": function (data,row,type, full) {
                     console.log(row);
                    return "<a href="-sharp" onclick="showDetail(row,\"zgjy_table\")" class=""+row.id+"">" + data + "</a>";// a<span>

                 }
             }*/
        ]
    });

clipboard.png

Mar.02,2021
Menu