Tbody scroll solution. Large number of rows increase page height

Question

I am attempting to implement a tbody scroll solution that is cross-browser compatible. This almost 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.

Example image: https://i.stack.imgur.com/zv0KR.png

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).

Edit: Swapped compiled SASS for CSS at @cimmanon's request.

// 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);
        }

Unless you have a Sass->CSS compilation issue, only post the compiled CSS. — cimmanon, Sep 08 '15 at 17:02
@cimmanon -- Thanks for the heads up. Swapped the SASS for CSS — Daniel Brown, Sep 08 '15 at 17:09
Have you tried adding ` ` as seen [here](http://stackoverflow.com/a/12902057)? — uri2x, Sep 08 '15 at 17:48
That's interesting. It does provide me with more accurate values for $(window).height(), but it does not fix the issue as seen in the imgur link in my post. — Daniel Brown, Sep 08 '15 at 17:53

score 0 · Accepted Answer · answered Sep 08 '15 at 19:52

Using Chrome's inspector, I noticed that the "computed" value for my <table> element's position property was set to static

Switching:

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

To:

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

    position: relative;

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

Did the trick. No more vast empty white space caused by overflow: hidden table rows. It may be worth mentioning that this solution appears to work for all edge browser versions.

Thanks to all those who took the time to look & comment!

Tbody scroll solution. Large number of rows increase page height

1 Answers1