title: Make TBODY scrollable in Webkit browsers
body: <p>I'm aware of <a href="https://stackoverflow.com/questions/130564/i-need-my-html-tables-body-to-scroll-and-its-head-to-stay-put">this question</a>, but none of the answers work in Safari, Chrome, etc.</p>
  
  <p>The accepted strategy (<a href="http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html" rel="nofollow noreferrer">as demonstrated here</a>) is to set the tbody height and overflow properties like so:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;This is the header and doesn't scroll&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody style="height:100px; overflow:auto;"&gt;
          &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Unfortunately, this does not work in any webkit browsers.  There is a <a href="https://bugs.webkit.org/show_bug.cgi?id=3239" rel="nofollow noreferrer">bug report</a> about it that doesn't seem to be a high priority (reported June 05).</p>
  
  <p>So my question is: are there alternate strategies that do actually work?  I've tried the two-table approach, but it's impossible to guarantee that the header will line up with the content.  Do I just have to wait for Webkit to fix it?</p>