title: Lock html table headers when table is set to 100% width
body: <p>ALl of the solutions for this seeingly simple problem involve tables with set defined cell widths. My table is set to be 100% of the width of the screen. Any ideas? I have tried to position:fixed on the thead as well as display:block on the thead and tbody with a scrollible tbody. The problem I have is the thead cells collapse. </p>
  
  <ul>
  <li>the table may have up 1 - 3 th cells, each could have a colspan of 1 - 5 (not all will be the same)</li>
  <li>I cannot define set td or th widths as I do not know how many cells I
  will have until after the data loads</li>
  <li>I cannot have horizontal
  scrolling</li>
  </ul>
  
  <p>Not sure how to do this...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Test 1 (should be 50%)&lt;/th&gt;
              &lt;th colspan="2"&gt;Test 2 (should be 50%)&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;A 1 (should be 50%)&lt;/td&gt;
              &lt;td&gt;A 2b (should be 25%)&lt;/td&gt;
              &lt;td&gt;A 2b (should be 25%)&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;B 1&lt;/td&gt;
              &lt;td&gt;B 2b&lt;/td&gt;
              &lt;td&gt;B 2b&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;C 1&lt;/td&gt;
              &lt;td&gt;C 2b&lt;/td&gt;
              &lt;td&gt;C 2b&lt;/td&gt;
          &lt;/tr&gt; 
          &lt;tr&gt;
              &lt;td&gt;D 1&lt;/td&gt;
              &lt;td&gt;D 2b&lt;/td&gt;
              &lt;td&gt;D 2b&lt;/td&gt;
          &lt;/tr&gt; 
          &lt;tr&gt;
              &lt;td&gt;E 1&lt;/td&gt;
              &lt;td&gt;E 2b&lt;/td&gt;
              &lt;td&gt;E 2b&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>table {width:100%;}
  thead, tbody {display:block;}
  tbody {overflow-x:scroll;height:100px;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6pBhP/" rel="nofollow">http://jsfiddle.net/6pBhP/</a></p>