Question

我正在尝试将表格高度设置为100％并且具有可滚动的tbody。为什么我的html元素在浏览器窗口之外增长？如何获取tbody而不是html元素的滚动条？我已经检查并尝试了我能找到的所有解决方案，但似乎没有一个可以与我的桌子一起使用。

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

Answer 1

<强>已更新

添加以下CSS规则将在Chrome，Opera和Safari中产生预期效果，但在Internet Explorer和Firefox上则不会。您需要使用额外的解决方法（例如，使用JavaScript动态修复表的高度）来处理这些浏览器：

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

CSS：100％表高度和可滚动的tbody

1 个答案: