0

I'm trying to set table height to 100% and have scrollable tbody. Why does my html element grow outside browser window? How can I get scrollbar for tbody instead of html element? I've checked&tried all solutions I could find but none seem to work with my table.

HTML:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
  Table with autoscroll and fixed headers
</title><link rel="stylesheet" type="text/css" href="autoscroll.css" />
    <script>
        function scrollElementById(elementId) {
            document.getElementById(elementId).scrollTop = document.getElementById(elementId).scrollTop + 1;
            scrolldelay = setTimeout('scrollElementById(\'' + elementId + '\')', 100); // scrolls every 100 milliseconds
        }
    </script>
</head>
<body onload="scrollElementById('tableData')">


            <table>
                <thead>
                    <tr>
                        <td>foo</td>
                        <td>bar</td>
                    </tr>
                </thead>
                <tbody id="tableData">

                    <tr>
                        <td>    a   </td>
                        <td>    b 9.2     </td>
                    </tr>

                    <tr>
                        <td>    899   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    607   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    606   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    605   </td>
                        <td>    b 2.1     </td>
                    </tr>

                    <tr>
                        <td>    604   </td>
                        <td>    b 3.5     </td>
                    </tr>

                    <tr>
                        <td>    315   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    313   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    160   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    159   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    159   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    157   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    156   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    155   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    154   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    150   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    143   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    142   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    140   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    139   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    139   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    135   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    134   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    125   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    122   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    183   </td>
                        <td>    b 0.1     </td>
                    </tr>

                    <tr>
                        <td>    179   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    177   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    174   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    172   </td>
                        <td>    b 2.0     </td>
                    </tr>

                    <tr>
                        <td>    172   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    165   </td>
                        <td>    d     </td>
                    </tr>

                    <tr>
                        <td>    119   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    103   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    102   </td>
                        <td>    c     </td>
                    </tr>

                    <tr>
                        <td>    102   </td>
                        <td>    c     </td>
                    </tr>

                </tbody>
            </table>
</body>
</html>

CSS:

* {
    margin:             0;
    padding:            0;
}
html,body {
    height:             100%
}
tr {
    height:             2em;
}
table {
    background-color:   red;
}
html {
    background-color:   blue;
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
jumxozizi
  • 642
  • 10
  • 21

1 Answers1

0

UPDATED

Adding the following CSS rules will lead to the desired effect in Chrome, Opera and Safari, but not on Internet Explorer and Firefox. You need to use extra workaround (e.g. fixing the height of the table dynamically using JavaScript) to handle these browsers:

table {
    background-color: red;
    height: 100%;    
}

table thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}

table tbody {
    height: 100%;
    display: inline-block;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
chiwangc
  • 3,566
  • 16
  • 26
  • 32
  • html element still gets a scrollbar instead of tbody. – jumxozizi Jul 23 '14 at 09:42
  • A quick fix to remove the scrollbar is to add `overflow: hidden;` to the body – chiwangc Jul 23 '14 at 10:08
  • Adding "overflow: hidden;" for body, does not spawn a scrollbar on tbody element. – jumxozizi Jul 23 '14 at 10:09
  • Do you have a scrollbar in the modified code? It is attached to the tbody element but not the body element – chiwangc Jul 23 '14 at 10:11
  • The headers move when I use the scrollbar, so I believe the scrollbar is from table. I need the scrollbar on tbody instead. The table has to be 100% height and headers must be fixed (I want to scroll rows only). – jumxozizi Jul 23 '14 at 10:18
  • The scrollbar is on tbody, the table has 100% height, and theheader is fixed, see the working example here: [link](http://w3lab.cc/demo.html) – chiwangc Jul 23 '14 at 11:09
  • The scrollbar in http://w3lab.cc/demo.html seems to be in right place. Unfortunately it is disabled and cannot be used. – jumxozizi Jul 23 '14 at 11:42
  • I spent hours looking for solutions but had no luck, perhaps you should use JavaScript to dynamically fix the height of the table. The current source actually works on Chrome, Opera and Safari, but Firefox appears to render the markup in a weird way...In Firefox, the computed height of the `body` element is 709px, but for some reason the computed height of the `table` element is 1250px. In contrast, these parameters match in the other three browsers... – chiwangc Jul 23 '14 at 14:57
  • Thank you chiwangc, you are exactly right! This problem affects at least Internet Explorer 11 and Firefox 30.0. The demo works on Chrome, Opera and Safari. I better use more than two browsers next time I troubleshoot a website. That JavaScript solution sounds like a good workaround, I'll look into it. – jumxozizi Jul 23 '14 at 17:32