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