title: Table with multiple inner tables and Fixed Header Table with Horizontal Scroll
body: <p>I have been working with a table which has 3 inner tables. and the third table being wider in width and has horizontal scroll. </p>
  
  <p>I have been trying to fix the header for each table and trust me I tried all the solutions but none of the solution over the internet has the same thing as I do (or may be I couldn't find one)</p>
  
  <p>I tried various plugins floathead and fixedheadertable but the horizontal thing breaks it. </p>
  
  <p>I have my jsfiddle example up can anyone show me the way maybe </p>
  
  <p><a href="http://jsfiddle.net/warlockdn/qyrjvnvv/2/" rel="nofollow">http://jsfiddle.net/warlockdn/qyrjvnvv/2/</a></p>
  
  <p>I am open to restructure the table but not sure what way to take ? </p>
  
  <p>This is the basic structure </p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;Latest&lt;/td&gt;
              &lt;td&gt;Oil Majors&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;td&gt;
              &lt;table&gt;&lt;/table&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;table&gt;&lt;/table&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;table&gt;&lt;/table&gt;
          &lt;/td&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>