title: CSS: 100% table height and scrollable tbody
body: <p>I'm trying to set table height to 100% and have scrollable tbody. Why does my html element grow outside browser window? How can I get scrollbar for tbody instead of html element? I've checked&amp;tried all solutions I could find but none seem to work with my table.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;&lt;title&gt;
    Table with autoscroll and fixed headers
  &lt;/title&gt;&lt;link rel="stylesheet" type="text/css" href="autoscroll.css" /&gt;
      &lt;script&gt;
          function scrollElementById(elementId) {
              document.getElementById(elementId).scrollTop = document.getElementById(elementId).scrollTop + 1;
              scrolldelay = setTimeout('scrollElementById(\'' + elementId + '\')', 100); // scrolls every 100 milliseconds
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="scrollElementById('tableData')"&gt;
  
  
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;td&gt;foo&lt;/td&gt;
                          &lt;td&gt;bar&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody id="tableData"&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    a   &lt;/td&gt;
                          &lt;td&gt;    b 9.2     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    899   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    607   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    606   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    605   &lt;/td&gt;
                          &lt;td&gt;    b 2.1     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    604   &lt;/td&gt;
                          &lt;td&gt;    b 3.5     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    315   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    313   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    160   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    159   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    159   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    157   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    156   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    155   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    154   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    150   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    143   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    142   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    140   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    139   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    139   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    135   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    134   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    125   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    122   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    183   &lt;/td&gt;
                          &lt;td&gt;    b 0.1     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    179   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    177   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    174   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    172   &lt;/td&gt;
                          &lt;td&gt;    b 2.0     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    172   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    165   &lt;/td&gt;
                          &lt;td&gt;    d     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    119   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    103   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    102   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                      &lt;tr&gt;
                          &lt;td&gt;    102   &lt;/td&gt;
                          &lt;td&gt;    c     &lt;/td&gt;
                      &lt;/tr&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>* {
      margin:             0;
      padding:            0;
  }
  html,body {
      height:             100%
  }
  tr {
      height:             2em;
  }
  table {
      background-color:   red;
  }
  html {
      background-color:   blue;
  }
  </code></pre>