Scrollable tbody - What Am I Doing Wrong?

HTML & CSS
#1

Good Evening All,

I have a section on my website with about five (5) TD’s, each containing a dedicated iframe.

My issue lays within the two TD’s that contain a scrollable tbody where I don’t want the header nor footer to move/be scrollable, only what’s within the tbody.

Now, with the browser size set to 1024x768 it looks as intended. However, I can never get it to scale appropriately with the rest of the page without leaving a larger gap the more it is increase.

To get this to work the way it is, I’m using two tables on one page inside the iframe - first table is the header and body, the second contains the textarea/form.

I have attached a screenshot of it looking as I intended, and a second screenshot of a close up when the browser window is enlarged showing the unwanted gap between the body and form.

Please advise what other information you’d like me to provide if any. I’m obviously no expert but I’m getting most of it to work, just stuck on this issue right now.

screenshot
screenshot1050×871 231 KB

#2

upclose
upclose1074×467 107 KB

#3

It looks very “pretty”, but, where’s the code? I mean, strip it down to a test page for us and post some code so we can see where it is failing. A picture does not help us look at your code…

#4

My apologies, here is the code now.

I essentially just want it to work as if it were three sections (fixed header, scrollable tbody, fixed footer) and the header/footer’s height stay the same and the tbody expands at an equal ratio.

::-webkit-scrollbar-track {border: none;} thead, tbody { display: block; } tbody { height: 62%; overflow-y: auto; overflow-x: hidden; } table { width: 100%; height: 100%; background: #1A355B; border-spacing: 8px; } .iframe-maincomms { padding: 4px; border: none; box-shadow: none; }
    note NOTES close fullscreen refresh
DATE / TIME STAMP
MESSAGE..
DATE / TIME STAMP
MESSAGE..

#5 
<style>
::-webkit-scrollbar-track {border: none;}

thead, tbody { display: block; }

tbody {
    height: 62%;
    overflow-y: auto;
    overflow-x: hidden;
}

table {
    width: 100%;
    height: 100%;
    background: #1A355B;
    border-spacing: 8px;
}

.iframe-maincomms {
    padding: 4px;
    border: none;
    box-shadow: none;
}

</style>

<body style="background: #1A355B;width: 100vw;height: 100vh;">

<table style="height: 100%;padding: 4px 4px 0 4px;border-spacing: 0;">
<thead>
    <tr>
        <th style="width: 40vw;vertical-align: top;">
            &nbsp; &nbsp; <i class="material-icons icons1" style="font-size: 22px;">note</i> <p9>NOTES</p9>
        </th>
        <th style="width: 60vw;vertical-align: top;">
            <button class="btn-iframeicons-nobg"><i class="material-icons" style="font-size: 22px;color: #cc0000;">close</i></button>
            <button class="btn-iframeicons-nobg"><i class="material-icons" style="font-size: 22px;">fullscreen</i></button>
            <button class="btn-iframeicons-nobg"><i class="material-icons" style="font-size: 22px;">refresh</i></button>
        </th>
    </tr>
</thead>

<tbody>
    <tr>
        <td colspan="2" class="iframe-maincomms">DATE / TIME STAMP<br>MESSAGE..</td>
    </tr>
    <tr>
        <td colspan="2" class="iframe-maincomms">DATE / TIME STAMP<br>MESSAGE..</td>
    </tr>
</tbody>

<table style="position: fixed;bottom: 0;height: 10vh;padding: 0px 4px 4px 4px;border-spacing: 0;">
<thead>
    <tr>
        <td style="width: 100vw;">
                <textarea type="text" name="" id="" value="" autocomplete="off" style="width: 100%;min-height: 45px;margin-top: 8px;"></textarea>
                <br style="clear:both;" />
                <input type="submit" name="submit" id="submit" value="SUBMIT" style="float: right;width: 32%;margin-top: 8px;">
                <input type="submit" name="reset" id="reset" value="CLEAR" style="float: right;width: 31%;margin-top: 8px;margin-right: 3%;">
                <input type="submit" name="reset" id="reset" value="URGENT" style="width: 31%;float: right;margin-top: 8px;margin-right: 3%;">
        </td>
    </tr>
</thead>
</table>
#6

You’re making this harder by having inline-styling. I would also look into using a grid or flexbox as it would be so much easier do that. Though someone will probably help you out doing it this way.

#7

Well, there are many ways to fix this issue. First, you have two tables but, only end one of them.
Next, tables are not really used these days for this. Normally, you would use DIV’s and set the scrolling options in each part of them to keep the header and footer in place. But, if you are willing to add one very small Jquery routine to your page, it is much easier to set up a table of any size and scroll the inside of it.

Here is a CodePen example of how it is done. (Not my code, but, think it does what you want!)
Scrollable Table Data with Locked header-footers Hope this helps…

Sponsor our Newsletter | Privacy Policy | Terms of Service