html - 元素包裹在 div 中而不是滚动

Question

我正在尝试在 html 中创建类似于 DataGridView 的内容。我将从数据库中提取数据并插入到我的 DGV 中。这个 DGV 的空间有限，所以我希望它在 x 轴和 y 轴上滚动。我试过使用表格和 div。当我尝试 th 标签或 h4 时，标签会换行而不是沿 x 轴滚动。

<div id="dgv">
  <div><h4>Header1</h4><h4>Header2</h4><h4>Header3</h4><h4>Header4</h4><h4>Header5</h4>
</div>

CSS:
#dgv
{
  overflow: scroll;
  white-space: nowrap;
  width: 500px;
  height: 200px;
}

#dgv h4
{
  display: inline;
  margin: 0px;
  width: 150px;
  float: left;
  border-right: 1px solid black;
}

Answer 1

您需要提供 <div>里面<div id="dgv">宽度大于其父项。尝试添加此 CSS:

#dgv div {
    width: 1000px;
}

那应该给你水平滚动。同样，如果您想要垂直滚动，它也需要比容器高的高度。

想到<div id="dgv">作为一个窗口，<div>在它里面就像你通过那个窗口看到的 Canvas 。如果 Canvas 大于窗口，则会发生滚动。如果没有为内部设置特定尺寸 <div>它只是从其父级继承它。