4

それは私の最初の投稿です。最後に、stackoverflow に参加することにしました。

私の問題は、コンテナーに 100% 収まる必要がある水平スクロールバーに関するものです。次の例では、私の問題を理解するために必要なすべてを見つけることができます。

http://jsfiddle.net/cexUr

問題は、最初のケースではコードが正常に機能するのに、テーブル セル内にネストされた場合 (2 番目のケース)、スクロールバーがコンテナーをオーバーフローするのはなぜですか? なぜこれが発生し、どのように修正できますか? 「テーブルを取り除くだけ」と言う人もいますが、テーブルレイアウトのある大きなサイトでこのコードが機能する必要があります。テーブルを取り除くことは、私にとって何百時間もの作業に相当します。

最初の (正しい) と 2 番目の scrollb (間違った) の主な違いは次のとおりです。

最初のスクロール (正解)

<div class="hscroll"> (images) </div>

水平スクロールの CSS コード:

.hscroll {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}

2 番目のスクロール (不正解)

<table><tr><td> (same code as first scroll) </td></tr></table>

あなたの賢明な提案に感謝します。

ジェラルド。

4

2 に答える 2

7

table { table-layout: fixed; }

テーブルを固定することで解決しました。

編集：私は数秒遅すぎるようです！

于 2013-04-06T20:35:32.590 に答える
6

クラスに追加table-layout: fixed;します。.table

.table{width:100%;margin-top:50px; table-layout: fixed; }

次に例を示します。

http://jsfiddle.net/cexUr/2/

于 2013-04-06T20:34:15.713 に答える