title: HTML table with vertical and horizontal scrolling
body: <p>There is a table in which the number of rows and columns to be displayed is not known in advance.That is generated in a JSP like</p>
  
  <pre><code>  &lt;thead&gt;
     &lt;tr&gt;
       &lt;c:foreach col=${Dcol} &gt;
        ...
       &lt;/c:foreach&gt;
     &lt;/tr&gt;
     &lt;/thead&gt;
  </code></pre>
  
  <p>i.e width of the columns isn't fixed</p>
  
  <p>When scrolling horizontally the header row should scroll horizontally.</p>
  
  <p>When scrolling vertically the header row should remain fixed.</p>
  
  <p>Although there is a solution here <a href="https://stackoverflow.com/questions/13666989/scrollable-table-both-horizontally-and-vertically-with-fixed-header">Scrollable table both horizontally and vertically with fixed header</a></p>
  
  <p>I would like to know if i can use two separate tables (Table1 for header row and Table2 for all other rows) and synchronize their horizontal scrolling by binding a horizontal scroll event on second table to call a function which scrolls first table horizontally.
  Can this be done through simple javascript as a table has only an onscroll event and no event for specific direction of scroll?</p>
  
  <p>Please provide any plain javascript solution or sequence of steps.Thanks </p>