title: CSS to create frozen row and column headers in table within overflow div?
body: <p>I'm trying to implement frozen row and column headers (similar to Excel) in a table within a content wrapper. Due to the required presence of other shifting elements on the screen, the CSS tricks that leverage the position:absolute property doesn't seem to work reliably for me.</p>
  
  <p>The idea is that when a page loads, the table is presented as shown below. The <strong>gray</strong> area represents the surrounding content that I can't remove. The <strong>red</strong>, <strong>green</strong> and <strong>purple</strong> boxes represent the row and column headers that I want to be frozen, so that they stay in place while the user scrolls or pans the <strong>white</strong> region.</p>
  
  <p><img src="https://i.stack.imgur.com/LuKSj.png" alt="Frozen headers starting position"></p>
  
  <p>As shown, the content very likely will stretch vertically beyond what's initially shown in the browser, so as the user scrolls down ideally the column headers will bump up to the top, illustrated below. <strong>However</strong>, this is a nice-to-have and not required. I'd be grateful even if the headers would just stay put where they're first loaded on the page.</p>
  
  <p><img src="https://i.stack.imgur.com/JOVQD.png" alt="Frozen headers after vertical scrolling"></p>
  
  <p>Also, like Excel, scrolling horizontally should leave the row headers alone while causing the column headers to move with the content.</p>
  
  <p><img src="https://i.stack.imgur.com/Fa8x1.png" alt="Frozen headers after horizontal scrolling"></p>
  
  <p>Is there any way to reliably achieve this functionality? I've created a JSFiddle that illustrates the scenario and the content wrapper in which I'm working: <a href="http://jsfiddle.net/Jr5Zt/3/" rel="nofollow noreferrer">http://jsfiddle.net/Jr5Zt/3/</a></p>
  
  <pre><code>&lt;table id="bodyTable"&gt;
      &lt;tbody&gt;&lt;tr&gt;&lt;td id="bodyCell"&gt;
          &lt;!-- my custom content --&gt;
      &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>