Tbody滚动解决方案。大量行会增加页面高度

Question

我正在尝试实现跨浏览器兼容的tbody滚动解决方案。这几乎让我在那里。我遇到的最后一个障碍是我的tbody中的行数非常大的情况。一切都正确滚动，但尽管隐藏了它的溢出，我的孩子们的身高也会增加。

示例图片：http://i.imgur.com/sHWldYg.png

我不想引入第三方解决方案，我相信这个解决方案可以在大多数浏览器中运行。任何/所有帮助表示赞赏。我也对其他tbody滚动解决方案持开放态度（虽然我看了很多）。

编辑：在@ cimmanon的请求下交换编译的SASS for CSS。

// HTML

        <div class="tbody-scroll tbody-scroll--five-col">
            <div class="inner-container">

                <div class="table-header">
                    <table>
                        <thead>
                            <tr>
                                <th data-field='Verified'>
                                    <input type="checkbox" id="testAll" />
                                    <label for="testAll"></label>
                                </th>
                                <th data-field='Name'>Name</th>
                                <th data-field='Web'>Part #</th>
                                <th data-field='Twitter'>Mfg Part #</th>
                                <th data-field='Id'>Cost</th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div class="table-body">
                    <table>
                        <tbody>
                            <tr>
                                <td data-field='Action'>
                                    <input type="checkbox" id="test1" />
                                    <label for="test1"></label>
                                </td>
                                <td data-field='Name'>Scanner Dongle</td>
                                <td data-field='Part Number'>12093475214-WW</td>
                                <td data-field='Mfg Part Number'>WOT-232</td>
                                <td data-field='Cost'>$23</td>
                            </tr>
                            <tr>
                                <td data-field='Action'>
                                    <input type="checkbox" id="test2" />
                                    <label for="test2"></label>
                                </td>
                                <td data-field='Name'>Printer Paper</td>
                                <td data-field='Part Number'>1204341232-Z232</td>
                                <td data-field='Mfg Part Number'>XXT-19</td>
                                <td data-field='Cost'>$5</td>
                            </tr>
                            ...
                        </tbody>
                    </table>
                </div>

            </div> <!-- /inner-container -->
        </div> <!-- /tbody-scroll -->

// CSS

    .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;
    }

// JS

        $(document).ready(function () {
            setTableBody();
            $(window).resize(setTableBody);
        });

        function setTableBody()
        {

            var halfViewport = (($(window).height() * 50) / 100); // 50vh
            console.log("resizing... " + halfViewport);
            $(".table-body").height(halfViewport);
        }