title: Jquery Datatable's cells size increases everytime it is recreated
body: <p>I'm using JQuery's datatable plugin.This is the configuration of table</p>
  
  <pre><code>            $('#myTable').dataTable({
                  data: data,
                  bFilter: false,
                  bInfo: false,
                  paging: false,
                  destroy: true,
                  columns: [
                      { 'data': 'ReportRank' },
                      { 'data': 'CategoryName' },
                      { 'data': 'ReportName' },
                      { 'data': 'PercentageChange' }
                  ]
              });
  </code></pre>
  
  <p>Data comes through an AJAX call. On the click of a button I again fetch the data and recreate DataTable. But every time I recreate the table the width and height of table cells increase even though the data remains the same. Any clues on what is causing this behavior?</p>
  
  <pre><code>Update
  </code></pre>
  
  <p>Html</p>
  
  <pre><code> &lt;div class="col-md-5"&gt;
          &lt;div class="form-layout"&gt;
              &lt;table class="table" id="myTable"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Rank&lt;/th&gt;
                          &lt;th&gt;Category&lt;/th&gt;
                          &lt;th&gt;Report&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;&lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$('#btnGet').on('click', function () {
  
      //$('#table').dataTable().fnDestroy();
      reportTrends.populateDatatable();
      }
  </code></pre>
  
  <p>populateDatatable method makes an ajax call and OnSuccess passes the data to the above mentioned configuration.</p>
  
  <blockquote>
    <p>Update 2</p>
  </blockquote>
  
  <p>To temporarily resolve the problem I have changed the configuration to</p>
  
  <pre><code>columns: [
                      { 'data': 'ReportRank', 'width': '10%' },
                      { 'data': 'CategoryName', 'width': '25%' },
                      { 'data': 'ReportName','width':'50%' },
                      { 'data': 'PercentageChange', 'width': '15%' }
                  ]
  </code></pre>
  
  <p>But I want some better solution and I'm still baffled about what's causing it.</p>