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

Question

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

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

我不想引入第三方解决方案，而且我相信这个解决方案可以在大多数浏览器上运行。任何/所有帮助表示赞赏。我也对其他 tbody 滚动解决方案持开放态度(尽管我已经看过不少)。

编辑:应@cimmanon 的要求将已编译的 SASS 换成 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);
        }

Answer 1

使用 Chrome 的检查器，我注意到我的 <table> 的“计算”值元素的 position属性设置为 static

切换:

.tbody-scroll table {
    font-size: 1rem;
    width: 100%;
    border-collapse: collapse;
    border-top: 0 none;
}

收件人:

.tbody-scroll table {
    font-size: 1rem;
    width: 100%;

    position: relative;

    border-collapse: collapse;
    border-top: 0 none;
}

成功了。不再有由 overflow: hidden 引起的巨大空白空间表行。可能值得一提的是，此解决方案似乎适用于所有边缘浏览器版本。

感谢所有花时间查看和评论的人!