title: Fix the headers in html table populated by ajax
body: <p>I am populating a html table using ajax call in the following manner- </p>
  
  <pre><code>$.ajax({
      type: "POST",
      url: "my_url",
      data: JSON.stringify(result),
      async: true,
      dataType: "json",
      contentType: "application/json; charset= Shift-JIS",
      success: function (response) {
          glResp = response;
          populateTable(glResp);
      },
      error: function (error) {
          console.log(error);
          //alert("Error!!");
      }
  });
  </code></pre>
  
  <p>Function that I am using to populate the table is as follows -
  <strong>JS</strong> -</p>
  
  <pre><code>function populateTable(finalObject) {
      var obj = finalObject;
  
      var headers1 = ['Name', 'City', 'Job', 'Salary'];
      var table = $("&lt;table id='my-table' /&gt;");
      var columns = headers1;
      columns.unshift('');
      var columnCount = columns.length;
      var row = $(table[0].insertRow(-1));
  
      for (var i = 0; i &lt; columnCount; i++) {
          if (i == 0) {
              var headerCell = $("&lt;th&gt;&lt;input type='button' id='sort'&gt;&lt;/th&gt;");
              row.append(headerCell);
          }
          else {
              var headerCell = $("&lt;th/&gt;");
              headerCell.html([columns[i]]);
              row.append(headerCell);
          }
      }
  
      $.each(obj, function (i, obj) {
          $row = '&lt;tr&gt;&lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;&lt;td&gt;' + obj.Name + '&lt;/td&gt;&lt;td&gt;' + obj.City + '&lt;/td&gt;&lt;td&gt;' + obj.Job + '&lt;/td&gt;&lt;td&gt;' + obj.Salary + '&lt;/td&gt;&lt;/tr&gt;';
          table.append(row);
      });
  
      var dvTable = $("#dvCSV");
      dvTable.html("");
      dvTable.append(table);
  }
  </code></pre>
  
  <p>Now I want the table headers to be  fixed on top when the data is being scrolled. Any idea as to how this can be implemented?</p>