title: Datatable column width issue after "refresh" row data
body: <p>I'm currently using datatable to produce table below:</p>
  
  <p><a href="https://i.stack.imgur.com/N795U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N795U.png" alt="enter image description here"></a></p>
  
  <p>I'm happy with the result as the width of each column is calculated automatically, resulting 1 line per row, looks awesome. The table above is generated via API, by using simple code below:</p>
  
  <pre><code>var dataTable;
  
  // This is the button with text "Filter" as shown in screenshot
  $('#search').click(function(e) {
      e.preventDefault();
  
      if (dataTable) {
          dataTable.clear();
          dataTable.destroy();
      }
  
      $.ajax({ 
          type : "GET", 
          url : contextPath + "/api/company/list", 
          contentType : "application/json;charset=utf-8", 
          data : { token : token(), name: $('#name').val() }, 
          success : function(data) {
              if (data) {
                  var tag = '';
  
                  for (var i = 0; i &lt; data.length; i++) {
                      var c = data[i];
  
                      tag += '&lt;tr&gt;' 
                          + '&lt;td&gt;' + (i + 1) + '&lt;/td&gt;' 
                          + '&lt;td&gt;' + c.name + '&lt;/td&gt;' 
                          + '&lt;td&gt;' + c.registrationNumber + '&lt;/td&gt;' 
                          + '&lt;td&gt;' + c.createdTime + '&lt;/td&gt;'
                          + '&lt;td&gt;'
                          + ' &lt;a href="' + contextPath + '/company?id=' + c.id + '" target="_blank"&gt;&lt;i class="fa fa-fw fa-search text-info"&gt;&lt;/i&gt;&lt;/a&gt;'
                          + ' &lt;a href="' + contextPath + '/company/update?id=' + c.id + '"&gt;&lt;i class="fa fa-fw fa-edit text-warning"&gt;&lt;/i&gt;&lt;/a&gt;' 
                          + '&lt;/td&gt;'
                          + '&lt;/tr&gt;';
                  }
  
                  $('#tableBody').html(tag);
                  dataTable = $('#tableBody').parent().DataTable();
              } else {
                  alert("Oops, there's an error! Please reload the page");
              }
          }, error : function(xhr) {
              alert("Oops, there's an error! Please reload the page");
              console.log(xhr);
          }
      });
  });
  </code></pre>
  
  <p>Snippet of table html:</p>
  
  <pre><code>&lt;div class="card-body"&gt;
      &lt;div class="table-responsive"&gt;
          &lt;table class="table data-table"&gt;
              &lt;thead class=" text-primary"&gt;
                  &lt;th&gt;#&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Registration Number&lt;/th&gt;
                  &lt;th&gt;Date Created&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody id="tableBody"&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, problem arise when I click the filter button and re-run the same onClick function, the table column will be somehow resize and looks below:</p>
  
  <p><a href="https://i.stack.imgur.com/SoQ9V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SoQ9V.png" alt="enter image description here"></a></p>
  
  <p>The width of each column is resized resulting 3 lines per row, subsequent clicks on Filter button will remain in this format. Anybody know how to avoid this column width recalculation thing?</p>