1

私は厄介な状況を発見しました：div内にoverflow: auto（またはoverflow: noneそれoverflow: scrollに関しては）テーブルがネストされていて、テーブルの幅がウィンドウの幅を超えている場合、ダイビングはテーブルを切り取り、スクロールバーを追加します...必要に応じて。

しかし、まったく同じシナリオを取り、それを（別の）テーブル内に投げると、突然、overflowプロパティが尊重されなくなります。

私が言っていることの例として、これが実際のケースです：

<div style="border: 1px solid green; overflow: hidden">
    <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
</div>

これをブラウザで見ると、右側に緑色の境界線が表示されますが、赤色の境界線は表示されません。これは、divがテーブルからオーバーフローを隠しているため、表示されるのは境界線だけだからです。

これを、テーブルにラップされたまったく同じコードと比較してください。

<table><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>

両方の要素がページからオーバーフローするため、右境界線がないことがわかります。十分に右にスクロールすると、divがテーブルを制約しなかったため、両方の境界線が表示されます。

これはおそらく、TDが他の要素とは異なる方法で幅を計算するために発生していると思います。したがって、TD内のdivは、100％の幅の計算が「間違っている」ため、適切にオーバーフローできません（ただし、実際には間違っていませんが、用語では間違っています）私が欲しいものの）。

それを考えると、「テーブル内」の場合に適切なオーバーフロー動作を取得する方法を誰かが理解するのを手伝ってもらえますか？

4

3 に答える 3

1

table-layout: fixed;width: 100%外のテーブルで使うだけ

<table style="table-layout: fixed;width: 100%"><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>
于 2020-06-12T07:06:37.457 に答える
0

テーブルを別のdivでラップするだけです。

<div style="overflow: hidden">
<table><tr><td>
    <div style="border: 1px solid green; overflow: hidden">
        <table><tr><td><div style="border: 1px solid red; width: 9999px;">a</div></td></tr></table>
    </div>
</td></tr></table>
</div>
于 2012-11-30T00:44:16.033 に答える
0

悲しいことに、私は外側のテーブルを削除することでこれを解決する必要がありました（つまり、レイアウトを完全に刷新する必要がありました）。別の方法があるかどうかはまだ聞きたいですが...

于 2012-12-04T17:17:45.927 に答える