how to make column width adjust automatically as per the data inside in Datatable

Question

I am creating datatable as this :

var Master = $('#MasterGrid').DataTable( {
            "data": response,   
            "columns":columns,
            "scrollX": true,                            
            });
        $('#MasterGrid').show();

picture displaying row design is distorted completely as the height of the row is increased because of column string length

my table rows height got irregular just because of this issue i am trying to make column width adjustable according to the dynamic data that is being filled in the column. i ve tried using :

 columnDefs: [
        { width: 200, targets: 0 }
    ],

and

scroller: {
    rowHeight: 30
}

by using scroller it is distorting my table style picture displaying the distortion in the datatable

I have tried using but nothing seems taking effect on the table

$('#masterGrid').column.adjust().draw();

Answer 1

I found the Solution of the issue applying following steps. 1) Irregular height issue of row fixed by adding this css.

th, td {
    white-space: nowrap;
}

2) table headers column and body column misalignment issue solved when I removed scrollx

var Master = $('#MasterGrid').DataTable( {
    "data": response,   
    "columns":columns,
});

$('#MasterGrid').show();
$('#MasterGrid').wrap("<div class='scrolledTable'></div>");

3) adding custom css in the style.css file

.scrolledTable{ overflow-x: auto; clear:both; }

@Syed Ali Taqi thanks for your help sir! this solve the question with this link too Datatables table header & column data misaligned when using "sScrollY"

Answer 2

Try this CSS:

th, td {
  white-space: nowrap;
}

Working Demo