title: html table fixed rows and columns when table contains different colSpans and rowSpans
body: <p><a href="https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body">Questions</a> about <a href="https://stackoverflow.com/questions/296020/how-can-i-lock-the-first-row-and-first-column-of-a-table-when-scrolling-possibl">fixed headers and columns</a> are abundant, and so are <a href="https://stackoverflow.com/a/1312678">css</a>/javascript/jQuery solutions.<br>
  Unfortunately, <a href="http://fixedheadertable.com/" rel="nofollow noreferrer">none</a> of the <a href="http://www.datatables.net/index" rel="nofollow noreferrer">solutions</a> <a href="https://github.com/meetselva/fixed-table-rows-cols/issues/3" rel="nofollow noreferrer">work</a> when I have a table with different <code>colSpan</code>s and <code>rowSpan</code>s;  </p>
  
  <p>so, let's take this table for example:  </p>
  
  <pre><code>&lt;table &gt;
      &lt;thead&gt;
          &lt;tr &gt;
              &lt;td rowspan="2" class="row-header"&gt;[Product.Color]&lt;/td&gt;&lt;td rowspan="2" class="row-header"&gt;[Product.SizeUnitMeasureCode]&lt;/td&gt;&lt;td &gt;False&lt;/td&gt;&lt;td &gt;True&lt;/td&gt;
          &lt;/tr&gt;&lt;tr&gt;
              &lt;td &gt;True&lt;/td&gt;&lt;td &gt;True&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;&lt;tbody&gt;
          &lt;tr&gt;
              &lt;td rowspan="2" class="row-header"&gt;Blue&lt;/td&gt;&lt;td class="row-header"&gt;&lt;/td&gt;&lt;td &gt;225.49&lt;/td&gt;&lt;td &gt;&lt;/td&gt;
          &lt;/tr&gt;&lt;tr&gt;
              &lt;td class="row-header"&gt;CM &lt;/td&gt;&lt;td &gt;&lt;/td&gt;&lt;td &gt;23790.17&lt;/td&gt;
          &lt;/tr&gt;&lt;tr&gt;
              &lt;td class="row-header"&gt;Grey&lt;/td&gt;&lt;td class="row-header"&gt;&lt;/td&gt;&lt;td &gt;125&lt;/td&gt;&lt;td &gt;&lt;/td&gt;
          &lt;/tr&gt;&lt;tr&gt;
              &lt;td class="row-header"&gt;Multi&lt;/td&gt;&lt;td class="row-header"&gt;&lt;/td&gt;&lt;td &gt;478.92&lt;/td&gt;&lt;td &gt;&lt;/td&gt;
          &lt;/tr&gt;&lt;tr&gt;
              &lt;td rowspan="2" class="row-header"&gt;Yellow&lt;/td&gt;&lt;td class="row-header"&gt;&lt;/td&gt;&lt;td &gt;215.96&lt;/td&gt;&lt;td &gt;&lt;/td&gt;
          &lt;/tr&gt;&lt;tr&gt;
              &lt;td class="row-header"&gt;CM &lt;/td&gt;&lt;td &gt;&lt;/td&gt;&lt;td &gt;34311.33&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>(<a href="http://jsfiddle.net/jdNkJ/1/" rel="nofollow noreferrer">fiddle</a>)
  (which generates the following:
  <img src="https://i.stack.imgur.com/WCbfX.png" alt="enter image description here">
  )</p>
  
  <p>(yes, you probably noticed that I'm talking about a pivot table here :)).</p>
  
  <p>I would like for the column header section (gray background) to remain in place when the table content is scrolled vertically, and for the row header section (red text) to remain in place when scrolling vertically.  </p>
  
  <p>Any thoughts? (any css / jQuery / javascript solution will be accepted :))</p>