html - 在屏幕的右半部分放置 6 个可滚动表格，一个放在另一个下面

Question

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

我使用以下 div 类，但只有前两个表格一个放在另一个下面。其他 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>

如果六个表应该挤进高度，并且(如您所说)有垂直滚动条，请看一下这个解决方案:

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>