css table - avoid wrapping of table cells

Question

I am creating a kind of boardgame in javascript. The images for the board are put inside a table. I used to do this using html <table> tags. However, I got convinced that due to the fact that this table does not really contain data, I should really use <div> elements to visualize it.

<div id='board'>

  <!-- the table starts here -->
  <div class='mytable'>

    <!-- table has multiple rows -->
    <div class='myrow'>

      <!-- a row has multiple cells -->
      <div class='mycell'/>
      ...
    </div>
    ...
  </div>

</div>

To format them the same way a table would look, I am using the following CSS.

.mytable{
  display:table;         
  width:auto;      
  border:0px;      
  border-spacing:0px;
  padding: 0px;
  border-collapse: collapse;
  table-layout:fixed;
}

.myrow{
  display:table-row;
  width:auto;
  height: auto;
  clear:both;
}

.mycell{
  float:left;/*fix for buggy browsers*/
  text-align: center;
  display:table-cell;         
  width:31px;
  height:31px;
  background: url(background.png) no-repeat;
}

Everything works fine on first sight. However when the table is too big to fit on the screen, then the entire cells start wrapping to the next line. This happens for example when I make the browser window smaller.

What I would like to happen, is that the cells just stay where they are, and move outside the view of the web browser. Or alternatively put them in a fixed sized container which shows scrollbars when the table is too big.

I tried to specify a constant width (e.g. width: 200px) for the surrounding node (i.e. div#board). But this only works if the width is bigger than the table (i.e. div.mytable). (Unfortunately that's not the case, the table can have different sizes.)

What I tried:

• overflow: scroll doesn't work.
• white-space: nowrap doesn't work.
• also using table-layout: fixed but no visible difference.
• tried display: table-column instead of display: table-cell

What am I missing ?

Germanic

Answer 1

I think the easiest way to solve this is not to use display: table etc. Try using white-space: nowrap on the rows and display: inline-block on the cells.

A problem with display: inline-block is that it'll leave about 4px of whitespace between the elements if there is any whitespace in your markup. You can solve this by either putting all elements on a single line, or by setting a font-size: 0 on the board itself.

.board {
  font-size: 0;
}
.board__row {
  display: block;
  white-space: nowrap;
}
.board__cell {
  display: inline-block;
}

<div class="board">
  <div class="board__row">
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
  </div>
  <div class="board__row">
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
  </div>
  <div class="board__row">
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
    <div class="board__cell"><img src="http://www.placehold.it/31/f99/c66" /></div>
  </div>
</div>

Selden

Answer 2

The code above was initially based on the code of another thread: How create table only using <div> tag and Css

It described that the float:left was necessary to support certain browsers. But apparently this causes the unwanted wrapping. So, it should be removed.

Next the cells will no longer wrap, however there is another issue now. The cells will resize when they don't have enough space, stretching the images. To avoid this, simply specify a min-width: 31px.

Germanic