title: Table headers are shifting every time I re-populate table
body: <p>I am populating a html table using an Ajax call. Every time I click on Upload button which re-populates the table, the top header row shifts right. How can I ensure it actually does not happen ?</p>
  
  <p><strong>HTML</strong> - </p>
  
  <pre><code> &lt;input type="button" id="upload" value="Upload" class="btn btn-primary custom-button-width .navbar-right" /&gt;
  &lt;div id="hello" style="position: relative; margin-top: -10px; overflow: auto; width: 100%; max-height: 550px; align-self: center; overflow: auto;"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS-</strong></p>
  
  <pre><code>function populateTable(finalObject) {
  
  var headers1 = ["Name1","Name2","Name3","Name4","Name5","Name6",
  "Name7","Name8","Name9","Name10",
  ];
  
      var obj = resp;
      var table = $("&lt;table id='my-table' /&gt;");
      headers1.splice(6, 0, "New Name");
      var columns = headers1;
      columns.unshift('');
      var columnCount = columns.length;
      var thead = $('&lt;thead/&gt;');
      var row_head = $('&lt;tr/&gt;');
      for (var i = 0; i &lt; columnCount; i++) {
          var headerCell = $("&lt;th/&gt;");
          if (i == 0) {
              headerCell.html("&lt;span id='sort'&gt;ｷｬﾝｾﾙ&lt;/span&gt;");
          }
          else if (i == 15|| i==17) {
              headerCell.html([columns[i]]);
              headerCell.addClass("sortable");
          }
          else {
              headerCell.html([columns[i]]);
          }
          row_head.append(headerCell);
      }
      thead.append(row_head);
      table.append(thead);
      var tbody = $('&lt;tbody/&gt;');
  $.each(obj, function (i, obj) {
          var row = '&lt;tr &gt;&lt;td&gt;&lt;input type="checkbox"  value=' + obj.Name1 + '&gt;&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.Name2) + '&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.Name3) + '&lt;/td&gt;&lt;td&gt;'
               + ReplaceNull(obj.Name4) + '&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.Name5) + '&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.Name6) + '&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.Name7) + '&lt;/td&gt;&lt;td&gt;'
               + ReplaceNull(obj.Name8) + '&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.9) + '&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.10) + '&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.DisPoNumber1) + '&lt;/td&gt;&lt;td&gt;' + ReplaceNull(obj.DisPoNumber2) + '&lt;/td&gt;&lt;td&gt;&lt;input name=' + ReplaceNull(obj.Name1) + ' id=in' + ReplaceNull(obj.Name2) + ' type="text" size=15  placeholder="Enter Replacement name" value=' + ReplaceNull(obj.New_Name) + '&gt;&lt;/td&gt;&lt;/tr&gt;';
  
          tbody.append(row)
  
      });
  
      table.append(tbody);
  
      var dvTable = $("#hello");
      dvTable.html("");
      dvTable.append(table);
  </code></pre>
  
  <p><strong>Ajax</strong> -</p>
  
  <pre><code>$.ajax({
                      type: "GET",
                      url: '',
                      async: true,
                      dataType: "json",
                      contentType: "application/json; charset= UTF-8",
                      success: function (response) {
  
                              populateTable(glResp);
  
                      },
                      error: function (error) {
                          console.log(error);
                          alert("Error in the file format!!");
                      }
                  }); 
  </code></pre>