html - 在每个 td/box 中，如何使每个框中的标题固定在下面的可滚动 div 中？

Question

我有 9 个框，我希望每个框都有一个“标题”，以及“框 n”标题下方的可滚动内容。

正在寻找 1) 确保“标题”与每个框的顶部垂直对齐。 2) 可滚动内容占据每个框的最大高度。

我该怎么做？我的 HTML 如下:

html,
body {
  width: 100%;
  height: 100%;
}

table {
  border: 1;
  width: 100%;
  height: 100%;
}

td {
  text-align: center;
  background: red;
}

div {
  overflow: auto;
  height: 100%;
  background: yellow;
}

<table>
  <tr>
    <td>
      <div>
        Box1<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
    </td>
    <td>
      <div>Box2</div>
      <div>
        Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
    </td>
    <td>
      <div>
        Box3<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
    </td>
  </tr>
  <tr>
    <td>Box4</td>
    <td>Box5</td>
    <td>Box6</td>
  </tr>
  <tr>
    <td>Box7</td>
    <td>Box8</td>
    <td>Box9</td>
  </tr>
</table>

我的 fiddle 在这里: https://jsfiddle.net/ba5qxzmo/

Box 1 不好，因为 Box1 标题文本不是“固定在框的顶部并随内容滚动。方框 2 是我尝试创建固定标题的尝试，但它完全弄乱了方框的外观。方框 3 和其余方框也没有固定标题。

如何使每个框都有一个“固定”标题？ (Box1, Box2, Box3)，每个下方都有可滚动的内容(溢出)？

Answer 1

只需将除标题之外的单元格全部内容添加到 div 中，并使用 max-height 使 div 可滚动和 overflow-y:scroll并设置 height的 td 、标题和内容，以便所有内容都能正确对齐。

html,body {
  width:100%;
  height:100%;
}
table {
  border:1;
  width:100%;
  height:100%;

}
td {
  text-align:center;
  background:red;
  padding:  10px 0;
}

.scroll {
  overflow-y: auto;
  height: 100%;  
  background:yellow;
}

.heading{
  height:20px;
}

<table>
  <tr>
    <td>
      
        <span class="heading">Box1</span>
        <div class="scroll">
        Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
        </div>
     
    </td>
    <td>
      <span class="heading">Box1</span>
      <div class="scroll">
        Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
    </td>
    <td>
      
       <span class="heading">Box1</span>
         <div class="scroll">Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br> Some TExt<br>
      </div>
      
    </td>
  </tr>
  <tr>
    <td>Box4</td>
    <td>Box5</td>
    <td>Box6</td>
  </tr>
  <tr>
    <td>Box7</td>
    <td>Box8</td>
    <td>Box9</td>
  </tr>
</table>