TD width not the same as TH width

nirob110

Here's my initialization code:
$('#table1').DataTable({
"scrollX": true,
"autoWidth": true,
"columnDefs": [
{ "width": "20%", "targets": 0 }
],
destroy: true,
processing: true,
serverSide: true,
ajax: {
url: '{!! route("datatablesss.data") !!}',
method: 'POST'
},
columns: [
{data: 'pic', name: 'pic'},
{data: 'first_name', name: 'first_name'},
{data: 'last_name', name: 'last_name'},
{data: 'dob', name: 'dob'},
{data: 'gender', name: 'gender'},
{data: 'email', name: 'email'},
{data: 'phone', name: 'phone'},
{data: 'NID', name: 'NID'},
{data: 'state', name: 'state'},
{data: 'city', name: 'city'},
{data: 'address', name: 'address'},
{data: 'country', name: 'country'},
{data: 'action', name: 'action'}

                    ],
                    initComplete: function () {
                        this.api().columns().every(function () {
                            var column = this;
                            var input = document.createElement("input");
                            $(input).appendTo($(column.footer()).empty())
                            .on('change', function () {
                                column.search($(this).val()).draw();
                            });
                        });
                    },
                    "columnDefs": [{
                        "defaultContent": "-",
                        "targets": "_all"
                      }]
                });

How can fix this

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan