Question

我正在尝试在html中创建一个类似于DataGridView的东西。我将从数据库中提取数据并插入我的DGV。我有一个有限的空间来处理这个DGV所以我希望它能同时滚动x和amp; 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>视为您通过该窗口查看的画布。如果画布大于窗口，则会进行滚动。如果没有为内部<div>设置特定大小，则只从其父级继承它。

Answer 2

贾斯汀的答案在某些情况下可能会有所帮助。很少有以下情况：

如果您的列表元素为div，则默认情况下它将以全角作为父元素。但是，即使列表具有overflow: auto属性，项目也会自动换行。

如果使用的是盒模型方法，请尝试以下操作：

.list {
  overflow: auto;
  white-space: nowrap; // Will restrict children from wrapping
}

white-space引导.list内部的空间。

元素包装在div而不是滚动

2 个答案: