画面の右半分にある6つのスクロール可能なテーブルをもう1つ下に配置

Question

6つのユーザー定義のasp.netテーブルを配置する必要があります（各テーブルはdivにあります）。テーブルは、他のテーブルの下に配置されます。さらに、各テーブルには最小20個のエントリがあるため、各テーブルはスクロール可能です。

私は次のdivクラスを使用しますが、最初の2つのテーブルだけが他方の下に配置されます。他の4つはどこにでもあります。

.Occupy_Right_Half { 
float:right; 
overflow:hidden;} 

#scroll { 
overflow-y: auto; 
height:400px; 
width:42%; 
border-bottom: 2px solid grey; 

}

私はほとんどので、この質問のための私を許しなさい、CSSで動作しません。

Answer 1

このようなものをお探しですか？

.tables { 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
.tables div { 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    border-bottom: none; 
 
} 
 

 
.tables div:last-child { 
 
    border-bottom: 1px solid black; 
 
}

<div class="tables"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

6つのテーブルは高さに絞る必要がある場合、及び（あなたが言ったように）垂直スクロールバーを持って、このソリューションに見てみましょう：

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.tables { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: right; 
 
} 
 

 
.tables div { 
 
    box-sizing: border-box; 
 
    height: 16.666%; 
 
    border: 1px solid black; 
 
    border-bottom: none; 
 
    overflow-y: auto; 
 
} 
 

 
.tables div:last-child { 
 
    border-bottom: 1px solid black; 
 
}

<div class="tables"> 
 
    <div> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    </div> 
 
    <div> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    </div> 
 
    <div> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    </div> 
 
    <div> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    </div> 
 
    <div> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    </div> 
 
    <div> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    <p>Entry</p> 
 
    </div> 
 
</div>