title: How to have the first column fixed and the rest of the columns to scroll horizontally
body: <p>I am able to add the scrollbar, but the problem I am facing is that when the header is too big, the header overflows and is not breaking down. I want the header text to break down to next line and the rest of the columns should take the same height as the header.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="outerdiv"&gt;
      &lt;div id="innerdiv"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;Big Rowwwww1&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;2&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;3&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;4&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;5&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;6&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;7&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;8&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class="headcol"&gt;9&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
                  &lt;td class="long"&gt;QWERTYUIOPASDFGHJKLZXCVBNM&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> body {
          font:16px Calibri;
      }
      table {
          border-collapse:separate;
          border-top: 3px solid grey;
      }
      td {
          margin:0;
          border:3px solid grey;
          border-top-width:0px;
          white-space:nowrap;
      }
      #outerdiv {
          position: absolute;
          top: 0;
          left: 0;
          right: 5em;
      }
      #innerdiv {
          width: 100%;
          overflow-x:scroll;
          margin-left: 5em;
          overflow-y:visible;
          padding-bottom:1px;
      }
      .headcol {
          position:absolute;
          width:5em;
          left:0;
          top:auto;
          border-right: 0px none black;
          border-top-width:3px;
          /*only relevant for first row*/
          margin-top:-3px;
          /*compensate for top border*/
      }
      .headcol:before {
          content:'Row ';
      }
      .long {
          background:yellow;
          letter-spacing:1em;
      }
  </code></pre>
  
  <p>The current working code is below in the fiddle link
  <a href="http://jsfiddle.net/DYgD6/693/" rel="nofollow">http://jsfiddle.net/DYgD6/693/</a></p>