将6个可滚动的表放在屏幕的右半部分中，一个在另一个之下

Question

我需要放置6个用户定义的asp.net表（每个表都在div中），这样它们占据屏幕的右半部分，这些表一个放在另一个之下。此外，每个表都是可滚动的，因为每个表至少有20个条目。

我使用以下div类，但前两个表只放在另一个下面。其他四个都到处都是。

.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>

如果六个桌子应该挤进高度，并且（如你所说）有垂直滚动条，请看一下这个解决方案：

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>