title: Table fixed header and first column css/html
body: <p>I have a table that has a large number of line and columns. But I would like to have the header fixed and the first column fixed. Here is a picture of what I need.</p>
  
  <p><img src="https://i.stack.imgur.com/FjssX.png" alt="enter image description here"></p>
  
  <p>Only the pink part must scroll horizontally and vertically but the others must stay visible during the scrolling. My table is in a div.
  First, should I use one table or four (the blue one, the red one, the green one and the pink one) ?</p>
  
  <p>I have written this fiddle: </p>
  
  <p><a href="http://jsfiddle.net/5XWqj/1/" rel="nofollow noreferrer">http://jsfiddle.net/5XWqj/1/</a></p>
  
  <p>I tried to fix the header first but I wasn't a success</p>
  
  <pre><code>#container thead {
      position: fixed;
      top: 0;
  }
  </code></pre>
  
  <p>and something like this to select and fix the first column</p>
  
  <pre><code>#container tbody tr td:first-child {
      position: fixed;
      left: 0;
  }
  </code></pre>
  
  <p>but it's not fixing about the div that wrap my table.
  Maybe I will need some jQuery or JavaScript?</p>
  
  <p>If anyone could help.</p>