Css table - избегать обертывания ячеек таблицы

Я создаю своего рода настольную игру в javascript. Изображения для доски помещаются внутри таблицы. Я использовал это с помощью тегов html <table>. Однако я убедился, что из-за того, что эта таблица действительно не содержит данных, я должен действительно использовать элементы <div>, чтобы визуализировать ее.

<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>

Чтобы отформатировать их так же, как выглядела бы таблица, я использую следующий 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;
}

Все работает отлично с первого взгляда. Однако, когда таблица слишком большая, чтобы соответствовать на экране, , тогда все ячейки начинают перенос на следующую строку. Это происходит, например, когда я делаю окно браузера меньше.

Я бы хотел, чтобы ячейки оставались там, где они есть, и перемещаются за пределы веб-браузера. Или, альтернативно, поместите их в контейнер с фиксированным размером, который показывает полосы прокрутки, когда таблица слишком большая.

Я попытался указать постоянную ширину (например, width: 200px) для окружающего node (т.е. div#board). Но это работает только в том случае, если ширина больше таблицы (т.е. div.mytable). (К сожалению, это не так, таблица может иметь разные размеры.)

Что я пробовал:

overflow: scroll не работает.
white-space: nowrap не работает.
также использует table-layout: fixed, но без видимой разницы.
попробовал display: table-column вместо display: table-cell

Что мне не хватает?

Ответ 1

Я думаю, что самый простой способ решить это не использовать display: table и т.д. Попробуйте использовать white-space: nowrap для строк и display: inline-block для ячеек.

Проблема с display: inline-block заключается в том, что она оставит около 4px пробелов между элементами, если в вашей разметке есть пробелы. Вы можете решить эту проблему, поместив все элементы в одну строку или установив font-size: 0 на самой плате.

.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>

Ответ 2

Приведенный выше код был первоначально основан на коде другого потока: Как создать таблицу только с использованием <div> тег и Css

Описано, что float:left необходим для поддержки определенных браузеров. Но, по-видимому, это вызывает нежелательную упаковку. Поэтому его следует удалить.

Затем ячейки больше не будут завертываться, однако есть и другая проблема. Ячейки будут изменять размер, если у них недостаточно места, растягивая изображения. Чтобы этого избежать, просто укажите min-width: 31px.