1

JavaScriptを使わず、CSSとHTMLだけで以下を実現したい。

このような単純な HTML テーブルがあります。どちらの列にも動的コンテンツが含まれていますが、左側にはスクロール可能な div があります。そのスクロール可能な div の表示高さをテーブルに応じたサイズにし、テーブル サイズをの動的な高さだけcolumn2で設定します。

<table>
    <tr>
        <td class="column1">
            <div>
            ...
            </div>
        </td>
        <td class="column2">
            <div>
            ...
            </div>
        </td>
    </tr>
</table>

ページがレンダリングされるときに自動的に設定されたテーブルの高さにそのサイズでスクロール可能な div を設定できるように、動的コンテンツcolumn2のみに応じてテーブルの高さを調整する必要があります。column1column1column2

height()jQueryを使用して解決策を見つけましたが、右の列の高さを使用またはouterHeight()見つけて、左の列内のdivを適切に設定すると、特に右の列に多数のHTML要素が含まれている場合、パフォーマンスが非常に低下します独自のスクロール可能な div。

4

1 に答える 1

1

絶対配置を使用できます。

table {
    position: relative;
}

td {
    background: red;
    width:200px;
}

.column1>div {
    height:100%;
    overflow: auto;
    position: absolute;
    top:0;
    width:200px;
}
<link rel="stylesheet" href="del.css">
<table>
    <tr>
        <td class="column1">
            <div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
            </div>
        </td>
        <td class="column2">
            <div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
            </div>
        </td>
    </tr>
</table>

jsfiddleとしても利用できます。

于 2012-06-01T00:41:46.000 に答える