title: how to make column width adjust automatically as per the data inside in Datatable
body: <p>I am creating datatable as this :</p>
  
  <pre><code>var Master = $('#MasterGrid').DataTable( {
              "data": response,   
              "columns":columns,
              "scrollX": true,                            
              });
          $('#MasterGrid').show();
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/D4G6d.png" rel="nofollow noreferrer">picture displaying row design is distorted completely as the height of the row is increased because of column string length</a></p>
  
  <p>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 :</p>
  
  <pre><code> columnDefs: [
          { width: 200, targets: 0 }
      ],
  </code></pre>
  
  <p>and </p>
  
  <pre><code>scroller: {
      rowHeight: 30
  }
  </code></pre>
  
  <p>by using scroller it is distorting my table style <a href="https://i.stack.imgur.com/xOmvg.png" rel="nofollow noreferrer">picture displaying the distortion in the datatable</a></p>
  
  <p>I have tried using but nothing seems taking effect on the table </p>
  
  <pre><code>$('#masterGrid').column.adjust().draw();
  </code></pre>