Datatables - Setting column width

you should use "bAutoWidth" property of datatable and give width to each td/column in %

 $(".table").dataTable({"bAutoWidth": false , 
aoColumns : [
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "15%"},
      { "sWidth": "10%"},
    ]
});

Hope this will help.

My way to do it

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

This is the only way i could get it working:

JS:

columnDefs: [
            { "width": "100px", "targets": [0] }
        ]

CSS:

#yourTable{
    table-layout: fixed !important;
    word-wrap:break-word;
}

The CSS part isn't nice but it does the job.

I see in your Update 2 that you have use sAutoWidth, but I think you mistyped bAutoWidth. Try to change this.

You can also add a CSS rule to .table if the problem persists.

You should also be careful when the width of the content is greater than the header of the column.

So something like the combination of the 1 & 2:

$('.table').dataTable({
  bAutoWidth: false, 
  aoColumns : [
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '15%' },
    { sWidth: '10%' }
  ]
});