title: How to scroll table's "tbody" independent of "thead"?
body: <p>As specified in the <a href="http://www.w3.org/TR/html401/struct/tables.html#idx-row_group" rel="nofollow noreferrer">W3 specification</a> for Tables:</p>
  
  <blockquote>
    <p>Table rows may be grouped into a table head, table foot, and one or
    more table body sections, using the <a href="https://www.w3.org/TR/html401/struct/tables.html#edef-THEAD" rel="nofollow noreferrer"><code>THEAD</code></a>, <a href="https://www.w3.org/TR/html401/struct/tables.html#edef-TFOOT" rel="nofollow noreferrer"><code>TFOOT</code></a> and <a href="https://www.w3.org/TR/html401/struct/tables.html#edef-TBODY" rel="nofollow noreferrer"><code>TBODY</code></a> elements,
    respectively. This division enables user agents to support scrolling
    of table bodies independently of the table head and foot.</p>
  </blockquote>
  
  <p>I created the <a href="http://jsfiddle.net/nyCKE/1/" rel="nofollow noreferrer">following example</a>, but it doesn't work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;Problem&lt;/td&gt;
              &lt;td&gt;Solution&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function() {
      for (var i = 0; i &lt; 20; i++) {
          var a = Math.floor(10 * Math.random());
          var b = Math.floor(10 * Math.random());
          var row = $("&lt;tr&gt;").append($("&lt;td&gt;").html(a + " + " + b + " ="))
                             .append($("&lt;td&gt;").html(a + b));
          $("tbody").append(row);
      }
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table {
      background-color: #aaa;
  }
  tbody {
      background-color: #ddd;
      height: 100px;
      overflow: auto;
  }
  td {
      padding: 3px 10px;
  }
  </code></pre>