1

本质上，我希望一个表格尽可能多地显示在您的浏览器窗口中。但不是向下滚动整个页面，我只需要滚动 tbody 即可。你能帮我吗？

这是一个帮助的小提琴：http: //jsfiddle.net/drKpT/

还有我的 HTML：

<div id="container">
    <div id="header"><h1>This is my header</h1></div>
    <div id="sidebar"><ul><li>Nav 1</li><li>Nav 2</li></ul></div><div id="content">
        <div id="title"><h2>This is my content title</h2></div>
        <div id="data">
            <table>
                <thead>
                    <tr><th>id</th><th>name</th></tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>Pssssssst... &nbsp; &nbsp; I'd like this area (tbody) to scroll if it's taller than the window you're in</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                    <tr><td>1</td><td>abc</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="footer"><p>This is my footer</p></div>
</div>

和 CSS：

div,ul,li,h1,h2,td,tr {
    padding:0;margin:0;
}
#container {
    width:100%;
    background:#efefef;
}
#header {
    width:100%;
    display:inline-block;
    background:#dedede;
}
#sidebar {
    display:inline-block;
    width:20%;
    background:#cdcdcd;
}
#content {
    display:inline-block;
    width:80%;
    background:#bcbcbc;
}
table {
    border-collapse:collapse;border-spacing:0;
    width:100%;
}
tbody {
    border:3px dashed;
    width:100%;
}
#footer {
    width:100%;
    background:#ababab;
}
4

3 回答 3

1

您无法更改 tbody 的大小，因为它随着内容高度的扩展而扩展。要回答此解决方案，您需要创建另一个表。所以你有一张只包含 thead 的表。放在下面的另一个表只包含 tbody，包裹在一个带有溢出自动和一些高度的 div 中

如果您希望您的表格尽可能多地填充可用空间，请使用以下伪代码逻辑：

wanted_height = window_height - header_height - footer_height - some_fix_constant

编辑：第三版， http: //jsfiddle.net/drKpT/3/

于 2013-04-21T03:08:12.837 回答
0

您可以使用overflowcss 属性。它允许您定义大于包含对象的内容会发生什么。如果您总是想要显示滚动条，即使不可能，您也可以使用overflow: scroll;. 如果您只想在容器可滚动时看到滚动条，请使用overflow: auto;. overflow: auto是最常见的设置。

tbody{
overflow: auto;
position: absolute;
height: 100%;
}
于 2013-04-21T03:33:46.847 回答
0

你可以像这样使用它：

tbody {
    border:3px dashed;
    width:100%;
    overflow: auto;
}
于 2013-04-21T02:59:18.140 回答