css表 - 避免包装表格单元格 [英] css table - avoid wrapping of table cells

问题描述

我在javascript中创建了一种棋盘游戏。电路板的图像放在一张桌子里。我过去常常使用html < table> 标记。但是，我确信由于这个表并不真正包含数据这一事实，我应该使用< div> 元素来可视化它。

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>

要以与表格相同的方式格式化它们，我使用以下CSS。

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.

我想要发生的是，单元格保持原样，并移出Web浏览器的视图。或者将它们放在一个固定大小的容器中，当表太大时显示滚动条。

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.

我试图指定一个恒定的宽度（例如宽度：200px ）用于周围节点（即 div＃board ）。但这只适用于宽度大于表格的情况（即 div.mytable ）。 （不幸的是，情况并非如此，表格可以有不同的尺寸。）

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

我尝试了什么：

• 溢出：滚动不起作用。


• white-space：nowrap 不起作用。


• 也使用 table-layout：fixed 但没有明显区别。


• 试过 display：table-column 而不是 display：table-cell

• 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

我缺少什么？

推荐答案

上面的代码最初基于另一个代码主题：如何仅使用< div>创建表格标记和Css

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

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

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

接下来细胞将不再包裹，但现在还有另一个问题。当细胞没有足够的空间时，细胞会调整大小，拉伸图像。要避免这种情况，只需指定 min-width：31px 。

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.

这篇关于css表 - 避免包装表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！