css table - 避免表格单元格的换行答案

【问题标题】：css table - avoid wrapping of table cellscss table - 避免表格单元格的换行
【发布时间】：2015-07-12 04:03:53
【问题描述】：

我正在用 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;
}

乍一看一切正常。但是，当表格太大而无法在屏幕上显示时，然后整个单元格开始换行到下一行。例如，当我缩小浏览器窗口时会发生这种情况。

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

我尝试为周围的节点（即div#board）指定一个恒定的宽度（例如width: 200px）。但这仅适用于宽度大于表格的情况（即div.mytable）。（很遗憾，情况并非如此，表格可以有不同的大小。）

我尝试了什么：

overflow: scroll 不起作用。
white-space: nowrap 不起作用。
也使用table-layout: fixed，但没有明显区别。
尝试使用display: table-column 而不是display: table-cell

我错过了什么？

【问题讨论】：

标签： css html-table tablelayout css-tables

【解决方案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】：

上面的代码最初是基于另一个线程的代码：How create table only using <div> tag and Css

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

接下来单元格将不再换行，但现在还有另一个问题。当单元格没有足够的空间时，它们会调整大小，从而拉伸图像。为避免这种情况，只需指定 min-width: 31px。

【讨论】：