1

このコードに問題があります:

CSS:

        #pageBound{
            float:left;
            position:relative;
            left: 50%;
        }
        #page{
            float:left;
            position:relative;
            right: 50%;
        }
        .scroll{
            height: 150px;
            overflow-y: auto;
        }
        .myTable{
            border-collapse: collapse;
        }
        .myTable td{
            border: 1px solid black;
            padding: 10px 5px;
        }

HTML

<div id='pageBound'>
    <div id='page'>
        <div class='scroll'>
            <table class='myTable'>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
            </table>
        </div>
    </div>
</div>

ここでの作業例: http://honzabrabec.cz/test/overflow.html

Opera を除くすべてのブラウザでは、テーブルが少し縮小され (スクロールバーが内側に追加されます)、テーブルの行が途切れます。パディングを使用してテーブルの周りに別のラッパーを追加しても、問題は解決しません。ただし、「overflow-y:auto」を「overflow-y:scroll」に変更すると、IE を除くすべてのブラウザーで正常に動作します。このページに「overflow-y:scroll」を使用して別のテーブルを追加しても、同じ修正が機能します。

現在の Opera と同じように動作するようにしたいと考えています。つまり、テーブルは縮小しません。つまり、オーバーフロー div が存在しない場合と同じようにテーブルを表示する必要があります。

4

2 に答える 2

0

交換できます

.scroll {
    height: 150px;
    overflow-y: auto;
}

と

.scroll {
    height: 150px;
    overflow-y: scroll;
}

しかし問題は、テーブルの高さが 150px 未満になる可能性がある場合、スクロールバーが必要でなくても表示されることです。

編集：

申し訳ありませんが、あなたはすでにそれを知っていました。

しかし、準拠ブラウザで動作するこのソリューションを選択します。

また、IE を使用しているユーザーは、javascript ソリューションを試すことができます: http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/

于 2012-08-29T21:32:19.050 に答える
0

あなたは付け加えられます

.myTable{
white-space: nowrap;
}

しかし、水平スクロールバーが表示されます。

次に、追加できます

.myTable{
white-space: nowrap;
margin-right: 17px;/* or more */
}

Firefoxでも動きますが、スクロールバーが30pxのブラウザがあるかも...

于 2012-08-29T21:17:55.233 に答える