3

テーブルの高さを設定し、セルがテーブルよりも大きい場合はセルを個別にスクロールできるようにしたいと考えています。

次のコードを検討してください: (実際の動作はこちら)

<div style="display: table; position: absolute;
    width: 25%; height: 80%; min-height: 80%; max-height: 80%;
    left: 0%; top: 10%; right: 75%; bottom: 10%; border: solid 1px black;">
    <div style="display: table-row;">
        <div style="display: table-cell; border: solid 1px blue;">
            {Some dynamic text content}<br/>
            This cell should shrink to fit its contents.
        </div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell; border: solid 1px red;
            overflow: scroll;">
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
            This should only take up the remainder of the table's vertical space.
        </div>
    </div>
</div>

このコード (私の場合は IE8) を開くと、ブラウザーを最大化したときに 2 番目のセルが表にうまく収まることに気付くでしょう。理論的には、ブラウザーを縮小すると (テーブルも強制的に縮小されます)、テーブルが小さすぎてすべてのコンテンツが収まらなくなると、2 番目のセルの内側に垂直スクロールバーが表示されます。heightしかし実際には、CSS属性 によって設定された境界を超えて、テーブルが垂直方向に拡大するだけです。

うまくいけば、私はこのシナリオを適切に説明しました...

これを機能させる方法を知っている人はいますか？

4

2 に答える 2

1

その動作を得るには、CSS テーブル モデルを回避し、独自のテーブル スタイルの表示をフローティングで作成し、幅/高さなどを設定する必要がある場合があります。

于 2010-04-29T22:37:20.903 に答える