How to solve DataTables table header columns width and table body columns width mismatch sometimes?

Question

Following .js files are used.

jquery.dataTables.min.js (DataTables 1.10.16).
dataTables.bootstrap.min.js (DataTables Bootstrap 3 integration).
dataTables.responsive.min.js (Responsive 2.2.1).
dataTables.scroller.min.js (Scroller 1.4.4).

Following .css files are used.

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

Here is the table layout:

<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>

Here is the table script:

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" },
    ],
});

Here is the output:

Please, someone help me in this issue..

Pasindu Jayanath
– Pasindu Jayanath

2018-05-05 21:51:24 +00:00
Commented May 5, 2018 at 21:51 — Pasindu Jayanath
– Pasindu Jayanath, Commented May 5, 2018 at 21:51
No anyone?? :/ :(((

Pasindu Jayanath
– Pasindu Jayanath

2018-05-09 17:59:09 +00:00
Commented May 9, 2018 at 17:59 — Pasindu Jayanath
– Pasindu Jayanath, Commented May 9, 2018 at 17:59

C.HA · Accepted Answer · 2018-05-18 04:20:54Z

2

<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>

Just remove following code from "columnDefs" array.

{ 
    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>`;
    } 
}

And add this code:

"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>'
    );
},

In external css class

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

edited May 18, 2018 at 4:20

answered May 11, 2018 at 4:52

C.HA

2963 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Pasindu Jayanath Over a year ago

Thanks.. I will try that way.

Pasindu Jayanath Over a year ago

Hey, I tried as you suggested. Width mismatch can be solved by that, but now, passing [object Object] instead of buttons in td-6:actions. How to solve that? Please, let me know.

C.HA Over a year ago

This [object object] may be passed give to number of column issue.

C.HA Over a year ago

Remove completely hidden 'ID' column(0). You can handle button actions by 'data.id'(objectname.id). And just add 'td:eq(5)'.

Pasindu Jayanath Over a year ago

I removed column[0]: Id and I am not getting [object Object] error. But, data-id="${id}" is not passing now. :/

|

Collectives™ on Stack Overflow

How to solve DataTables table header columns width and table body columns width mismatch sometimes?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related