0

max-width：200pxとmax-height：400pxのdiv（MainDiv）の横に3つのテーブルがあり、自動サイズとmax-height：300pxのBodyDivがあります。

（MainDiv）でX方向にスクロールし、BodyDivでY方向にスクロールする必要があります。MainDivスクロールから、3つのテーブルすべてをスクロールできるようにします。

ただし、BodyDivの3列のみが表示され、200pxの位置にスクロールバーが配置されます。BodyDivの最後にこの巻物が必要です。

これが私のコードです：

コード

<div id="MainDiv" style="max-width:200px;max-height: 400px;overflow-X: auto;overflow-Y: hidden;">
<table style="background-color:Fuchsia;width:100%;">
    <tr >
        <td class="Cell">
            column1
        </td>
        <td class="Cell">
            column2
        </td>
        <td class="Cell">
            column3
        </td>
        <td class="Cell">
            column4
        </td>
        <td class="Cell">
            column5
        </td>
    </tr>
</table>
<div id="BodyDiv" style="max-height: 300px;overflow-Y: visible;overflow-X: hidden;">
    <table style="width:100%;">
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_odd">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
        <tr class="tr_even">
            <td class="Cell">
                column1
            </td>
            <td class="Cell">
                column2
            </td>
            <td class="Cell">
                column3
            </td>
            <td class="Cell">
                column4
            </td>
            <td class="Cell">
                column5
            </td>
        </tr>
    </table>
</div>
<table style="background-color:Fuchsia;width:100%;">
    <tr >
        <td class="Cell">
            column1
        </td>
        <td class="Cell">
            column2
        </td>
        <td class="Cell">
            column3
        </td>
        <td class="Cell">
            column4
        </td>
        <td class="Cell">
            column5
        </td>
    </tr>
</table>

4

4 に答える 4

1

問題が発生しているブラウザを知ることは役に立ちます。Chromeではほとんど問題ないように見えます。

両方のdivを最大高さ400pxに設定すると、外側のdivのサイズがオーバーロードされます（中央のテーブルをに拡張できる場合、最初のテーブルの高さ+中央のテーブルの高さ+最後のテーブルの高さは常に400pxより大きくなります400px）なので、一番下のテーブルは外側のdivの表示可能領域から「押し出され」ます。

于 2013-03-25T08:02:20.270 に答える
0

含まれているDIVにはオーバーフローがあるはずです-X：hidden; オーバーフロー-Y：autoはその逆ではありませんか？

また、3つのDIVすべてを内部に収めるために、コンテナDIVにもう少し高さを与える必要があります。

于 2013-03-25T08:08:14.507 に答える
0

BodyDivを100％幅に指定しています。これは、（存在する場合はスクロールバーを含めて）親の幅の100％のみになることを意味します（200px幅のMainDiv）。

BodyDivを親よりも大きくする唯一の方法は、固定幅の値を使用することです。これは、ブラウザーによってスクロールバーの幅がわずかに異なるため、問題が発生する可能性もあります。

于 2013-03-25T09:20:43.667 に答える
0

この問題は、内部div（BodyDiv）タグの固定幅を追加することで解決されます。divの最後にスクロールバーを配置します。Main Divをスクロールすると、3つのテーブルすべてがスクロールします。

于 2013-03-25T09:24:56.007 に答える