Question

我有这个小提琴https://jsfiddle.net/tomrhodes/yg8rcds0/

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="wrapper">
    <div class="grid-row">
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
    </div>
    <div class="grid-row">
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
    </div>
    <div class="grid-row">
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
    </div>
    <div class="grid-row">
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
    </div>
    <div class="grid-row">
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
    </div>
    <div class="grid-row">
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
      <div class="grid-cell">TEST</div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div

>

和

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.wrapper {
  border: solid rebeccapurple 5px;
  overflow: auto;
}

.grid-cell {
  min-width: 200px;
  height: 35px;
  border: solid green 2px;
}

我将使用CSS类div创建wrapper，并且此容器应满足以下约束：

内容应为表格形式，即一行的所有元素应始终位于一行中。如果行太长，则应显示wrapper的水平自动滚动。同样，所有行都应作为行，并且在必要情况下，应显示wrapper的垂直自动滚动。
wrapper应填充浏览器空间的所有“可用客户区”，即浏览器应避免显示垂直和水平页面滚动，而wrapper应适应并填充所有剩余的免费页面区域（页眉和页脚div占用其自身空间后仍保留。因此，如果wrapper无法显示其单元格内容，则wrapper应该创建其内部滚动，如果wrapper可以显示其所有内容，并保留一些剩余空间，然后wrapper可以在wrapper区域的右下方显示一些灰色。

奇怪的是，如果我使用td元素，.grid-cell不会应用于td元素，.grid-cell仅应用于div元素。我使用的是来自React应用程序的相同代码，并且此样式也适用于td组件。

容器div，其中包含可滚动的表，并填充所有工作区，并删除页面滚动

0 个答案: