css表格-避免包装表格单元格

我正在用javascript创建一种棋盘游戏。电路板的图像放在一张桌子里。我过去常常使用html

标记来完成这项工作。然而，我确信，由于这个表实际上并不包含数据，所以我应该真正使用

元素来可视化它

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

乍一看一切都很好。但是，当表格太大而无法在屏幕上显示时，则整个单元格开始换行。例如，当我缩小浏览器窗口时，就会出现这种情况

我希望发生的是，单元格只停留在它们所在的位置，并移动到web浏览器的视图之外。或者把它们放在一个固定大小的容器中，当桌子太大时，这个容器会显示滚动条

我试图为周围的节点（即

div#board

）指定一个恒定的宽度（例如

width:200px）。但这仅在宽度大于表格时有效（即
div.mytable
）。（不幸的是，情况并非如此，表可以有不同的大小。）

我尝试的是：


溢出：滚动
不起作用
空白：nowrap
不起作用
同样使用
表格布局：修复了
，但没有明显差异

尝试了
display:table column
而不是
display:table cell

我遗漏了什么？
我认为解决这个问题的最简单方法是不要使用
显示：表格
等。尝试在行上使用
空白：nowrap
，在单元格上使用
显示：内联块

display:inline block
的一个问题是，如果标记中有任何空白，它将在元素之间留下大约4倍的空白。您可以通过将所有元素放在一行上，或者在电路板上设置
字体大小：0
来解决此问题


.board{
字号：0；
}
.董事会会议室{
显示：块；
空白：nowrap；
}
.董事会会议室{
显示：内联块；
}
上述代码最初基于另一个线程的代码：

它描述了
float:left
是支持某些浏览器所必需的。但显然这会导致不必要的包装。所以，它应该被移除

下一步单元格将不再包装，但是现在还有另一个问题。当单元格没有足够的空间时，它们将调整大小，从而拉伸图像。要避免这种情况，只需指定一个
最小宽度：31px

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