Question

I am trying to create something simlar to a DataGridView in html. I will be pulling data from a database and inserting into my DGV. I have a limited space to work with for this DGV so I want it to scroll on both the x & y-axis. I have tried using tables and a div. When I try either th tags or h4, the tags wrap instead of becoming scrollable along the x-axis.

<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

You need to give the <div> inside <div id="dgv"> a width greater than its parent. Try adding this CSS:

#dgv div {
    width: 1000px;
}

That should give you horizontal scrolling. Likewise, if you want vertical scrolling, it’ll need a height greater than it’s container as well.

Think of <div id="dgv"> as a window, and the <div> inside it as the canvas you’re looking at through that window. If the canvas is larger than the window, scrolling happens. If no specific size is set for the inner <div> it just inherits it from its parent.