0

私は動的に作成されたギャラリーを構築しています。ここでは、ajax / phpがいくつかの画像をフェッチし、それらの画像を動的に作成されたテーブルにロードします。このテーブルに設定された幅があり、x方向にのみオーバーフローが必要です。問題は、テーブルの行（tr）がそれ自体をラップしているように見えることです。css overlay-xプロパティを使用してみました。また、テーブル幅（div内）を操作してみました。また、cssを使用してラッピングをオフにしてみました。これはどれも役に立ちません。テーブルは水平方向ではなく垂直方向にスクロールします。どんな助けでも大歓迎です。ありがとう。

テーブルの構造は次のとおりです。

    <table><tr><td><img style="width:100px;"/></td>...(many more columns)...</tr></table>
4

4 に答える 4

2

sを使用することをお勧めします<div>。

次のようなことを試してください：

HTML:

<div id="gallery-wrapper">
    <div><img src="..." /></div>
    ...
    <div><img src="..." /></div>
</div>

CSS:

div#gallery-wrapper{
    width:100%;
    height:100px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
}
div#gallery-wrapper > div{
   display:inline-block;
   width:100px;
   height:100px;
}

PS実際には、これを行うには他にも多くの方法があります。

于 2012-10-20T13:33:14.457 に答える
1

これは、間違ったコンテキストで表を使用する例であり、推奨されない理由です。絶対にテーブル レイアウトを使用する必要がある場合は、画像を td 内の div に配置し、div オーバーフローを設定します。

  <table><tr><td><div class="imageDiv"><img style="width:100px;"/></div></td>...(many more columns)...</tr></table>

.imageDiv{overflow-x:scroll;}
于 2012-10-20T13:27:48.190 に答える
1

jquery プラグインである jscrollpane を使用することをお勧めします。

http://jscrollpane.kelvinluck.com/

于 2012-10-20T13:43:10.763 に答える
0

テーブルではなく、テーブルの周囲の div に対して幅とオーバーフローを設定して、この div 内でテーブルをスクロールできるようにします。

<div style="width:1000px; overflow-x:scroll;"><table>...</table></div>
于 2012-10-20T13:32:56.620 に答える