CODEWITHSUNDEEP
htmlcss
Noam
Noam

Reputation: 5266

How to get an outer div not to cause wrapping of inner divs

I'm trying to create a datagrid in css and html with both horizontal and vertical scroll. Each row is a div, Each of my 5 cells a div with width 100px.

When I resize the grid to be less than 500px the cells wrap to a new line, instead of scrolling.

The only solution that worked is to make the row div 500px in width - but I don't like it.

How can I get the row div to match the width of it's children without setting it specifically.

.myGrid{
  max-width:300px;
  max-height:200px;
  overflow:scroll;
  display:block;
}
.td,
    .th {
      background-color: antiquewhite;
      width: 100px;
      float: left;
    }

    .thead {
      position: sticky;
      top: 0px;
    }

    .th {
      font-weight: bold;
    }

    .tr {
      display: block;
      clear: both;
    /*  width:500px; this solves my problem but I don't want it*/
    }
<div class="myGrid">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 40

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29249

That's how float works. It take a place only if it has enough space.

My suggestion is to use flex.

  1. Define the parent of the floating divs (.tr) as display: flex.
  2. To ensure that the children will be 100px width and, as result, the grid horizontal scrollable, set them to flex: 0 0 100px.

.myGrid {
  max-width: 300px;
  max-height: 200px;
  overflow: scroll;
  display: block;
}

.td,
.th {
  background-color: antiquewhite;
  flex: 0 0 100px;
}

.thead {
  position: sticky;
  top: 0px;
}

.th {
  font-weight: bold;
}

.tr {
  display: flex;
  clear: both;
  /*  width:500px; this solves my problem but I don't want it*/
}
<div class="myGrid">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

For more info about flex here is a great tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions