Fixed header and scrollable body

Question

I have like 15 columns in the table. I want to scroll both horizontal and vertical and header should be fixed when I scroll vertical. I have tried various examples but no luck. All I see header columns are not aligning with data. Column width are not fixed as number of columns vary based on the user selection

Please guide me to the correct example.

Answer 1

what you could do is a bit of visual trick to achieve this, use two div tags

<div class="Headers">
  <table class="NewHeader">
    <tr>
    </tr>
  </table>
</div>
<div class="Table">
  <table class="MyTable">
    <tr>
      <th>
      </th>
      ...
    </tr>
    <tr>
      <td>
      </td>
      ...
    </tr>
</div>

now with a bit of JavaScript or JQuery you can get the th, set its width to match the cell width, and move the th cell to the "Headers" table

$(document).ready(function(){
    var counter = 0;
    $(".MyTable th").each(function(){
        var width = $('.MyTable tr:last td:eq(' + counter + ')').width();
        $(".NewHeader tr").append(this);
        this.width = width;
        counter++;
    });
});

now only is left to do is to style the div "Table" with overflow, so now if you would scroll the second table the header will remain in place, i used jquery to simplify the readability, but can be done in JavaScript is same way

Live Demo

Example with automatic vertical scroll body and header