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 のサイズを変更することはできません。この解決策に答えるには、別のテーブルを作成する必要があります。したがって、tad のみを含むテーブルが 1 つあります。下に置かれる他のテーブルには、tbody のみが含まれ、オーバーフロー auto と高さのある div 内にラップされます

テーブルでできるだけ多くの空き領域を埋めたい場合は、次の疑似コード ロジックを使用します。

wanted_height = window_height - header_height - footer_height - some_fix_constant

編集: 3 番目のバージョン、http://jsfiddle.net/drKpT/3/

于 2013-04-21T03:08:12.837 に答える
0

次のように使用できます。

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