title: Html table with fixed header and fixed column both
body: <p><strong>I need both fixed headers and fixed columns at the same time.</strong></p>
  
  <p>I want to have fixed headers (first row and first column) and a scrollable table displaying at a given time.</p>
  
  <ul>
  <li>A left one containing the header column</li>
  <li>A right one containing the header row and the table</li>
  </ul>
  
  <p>IMP Point:</p>
  
  <ul>
  <li>When data moves horizontally: Fixed Header(first row will move accordingly)</li>
  <li>When data moves vertically: Fixed Column(first column will move accordingly)</li>
  </ul>
  
  <p>This would allow me to scroll horizontaly without have the header column moving, and to scroll verticaly without having the header row moving (by some absolute positioning within its parents I guess ?).</p>
  
  <p><strong>PS</strong>: I have searched a lot, but what i could found is, only fixed headers or fixed first column. I want both at a time. Here is the fiddle which contains fixed column, Please help me in adding fixed header(first row) in it. </p>
  
  <p>fiddle: <a href="http://jsfiddle.net/cfr94p3w/" rel="nofollow">http://jsfiddle.net/cfr94p3w/</a></p>
  
  <p>Html Code:</p>
  
  <pre><code>&lt;div class="table-container"&gt;
      &lt;div class="headcol"&gt;
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;th&gt;Room&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Fooname&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Barname&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Barfoo&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Zorzor&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Lorname Ipsname&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;th&gt;8-10&lt;/th&gt;
                  &lt;th&gt;10-12&lt;/th&gt;
                  &lt;th&gt;12-14&lt;/th&gt;
                  &lt;th&gt;14-16&lt;/th&gt;
                  &lt;th&gt;16-18&lt;/th&gt;
                  &lt;th&gt;18-20&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell booked"&gt;Already booked&lt;/td&gt;
                      &lt;td class="cell available"&gt;Available for booking&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you and have nice day.</p>