title: Tbody scroll solution. Large number of rows increase page height
body: <p>I am attempting to implement a tbody scroll solution that is cross-browser compatible. This <i>almost</i> gets me there. The last hurdle I have is for cases where the number of rows in my tbody is very large. Everything scrolls correctly, but despite having it's overflow hidden, my tbody's children add to the page's height.</p>
  
  <p>Example image: <a href="http://i.imgur.com/sHWldYg.png" rel="nofollow">http://i.imgur.com/sHWldYg.png</a></p>
  
  <p>I don't want to pull in a third party solution, and I believe that this solution can be made to work across most browsers. Any/all help is appreciated. I'm also open to other tbody scroll solutions (although, I have looked at quite a few).</p>
  
  <p><b>Edit:</b> Swapped compiled SASS for CSS at @cimmanon's request.</p>
  
  <p>// HTML</p>
  
  <pre><code>        &lt;div class="tbody-scroll tbody-scroll--five-col"&gt;
              &lt;div class="inner-container"&gt;
  
                  &lt;div class="table-header"&gt;
                      &lt;table&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th data-field='Verified'&gt;
                                      &lt;input type="checkbox" id="testAll" /&gt;
                                      &lt;label for="testAll"&gt;&lt;/label&gt;
                                  &lt;/th&gt;
                                  &lt;th data-field='Name'&gt;Name&lt;/th&gt;
                                  &lt;th data-field='Web'&gt;Part #&lt;/th&gt;
                                  &lt;th data-field='Twitter'&gt;Mfg Part #&lt;/th&gt;
                                  &lt;th data-field='Id'&gt;Cost&lt;/th&gt;
                                  &lt;th&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  
                  &lt;div class="table-body"&gt;
                      &lt;table&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td data-field='Action'&gt;
                                      &lt;input type="checkbox" id="test1" /&gt;
                                      &lt;label for="test1"&gt;&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td data-field='Name'&gt;Scanner Dongle&lt;/td&gt;
                                  &lt;td data-field='Part Number'&gt;12093475214-WW&lt;/td&gt;
                                  &lt;td data-field='Mfg Part Number'&gt;WOT-232&lt;/td&gt;
                                  &lt;td data-field='Cost'&gt;$23&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td data-field='Action'&gt;
                                      &lt;input type="checkbox" id="test2" /&gt;
                                      &lt;label for="test2"&gt;&lt;/label&gt;
                                  &lt;/td&gt;
                                  &lt;td data-field='Name'&gt;Printer Paper&lt;/td&gt;
                                  &lt;td data-field='Part Number'&gt;1204341232-Z232&lt;/td&gt;
                                  &lt;td data-field='Mfg Part Number'&gt;XXT-19&lt;/td&gt;
                                  &lt;td data-field='Cost'&gt;$5&lt;/td&gt;
                              &lt;/tr&gt;
                              ...
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt; &lt;!-- /inner-container --&gt;
          &lt;/div&gt; &lt;!-- /tbody-scroll --&gt;
  </code></pre>
  
  <p>// CSS</p>
  
  <pre><code>    .tbody-scroll {
          width: 100%;
      }
      .tbody-scroll .inner-container {
          overflow: hidden;
      }
      .tbody-scroll .table-header {
          position: relative;
          background: #546775;
          margin: 1rem auto 0 auto;
      }
      .tbody-scroll .table-body {
          overflow-y: scroll;
          border: 1px solid #aaaaaa;
      }
      .tbody-scroll table {
          font-size: 1rem;
          width: 100%;
          border-collapse: collapse;
          border-top: 0 none;
      }
      .tbody-scroll tbody {
          overflow: hidden;
      }
      .tbody-scroll tr {
          line-height: 1em;
          border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      }
      .tbody-scroll tr:last-child {
          border-bottom: none;
      }
      .tbody-scroll tr.striped {
          background-image: url(/styles/images/stripe4.png);
      }
      .tbody-scroll th,
      .tbody-scroll td {
          width: 20%;
          padding: 1.33333em 1.77778em;
          line-height: 1.77778em;
      }
      .tbody-scroll th:last-child,
      .tbody-scroll td:last-child {
          border-right: 0 none;
      }
      .tbody-scroll--four-col th,
      .tbody-scroll--four-col td {
          width: 25%;
      }
      .tbody-scroll--five-col th,
      .tbody-scroll--five-col td {
          width: 20%;
      }
      .tbody-scroll--six-col th,
      .tbody-scroll--six-col td {
          width: 16.66666%;
      }
      .tbody-scroll th {
          letter-spacing: 0.31641em;
          text-transform: uppercase;
          font-weight: 400;
          font-size: 1em;
          text-align: left;
          color: #ffffff;
      }
      .tbody-scroll th:last-child {
          display: block;
          padding: 0;
          margin: 0;
          height: 10px;
          width: 19px;
      }
  </code></pre>
  
  <p>// JS</p>
  
  <pre><code>        $(document).ready(function () {
              setTableBody();
              $(window).resize(setTableBody);
          });
  
          function setTableBody()
          {
  
              var halfViewport = (($(window).height() * 50) / 100); // 50vh
              console.log("resizing... " + halfViewport);
              $(".table-body").height(halfViewport);
          }
  </code></pre>