使用div的表 - 行没有y溢出

Question

我正在尝试使用div创建一个表。 （我不能使用table，tr＆amp; td标签）

问题是：

• 我的单元格必须彼此相邻（我使用float:left）
• 我的行不应该垂直扩展，但可以在x轴上生长。

所以这是我的HTML：

<div id="table">
  <div class="rowHeader">

  </div>
  <div class="row">
      <div class="cell">bla</div>
      <div class="cell">bla</div>
      <div class="cell">bla</div>
  </div>
  <div class="row">
      <div class="cell">bla2</div>
      <div class="cell">bla2</div>
      <div class="cell">bla2</div>
  </div>
</div>

和CSS：

#table {
  display: table;
  width: 100%;
}

.row {
  width: 100%;
  overflow: hidden;
  display: table-row;
}

.cell {
  float: left;
  display: table-cell;
  margin: 1px;
  padding: 2px;
  width: 35%;
  background: #ff3434;

}

有什么建议吗？

警告：我的网站应该使用IE6（请避免使用CSS3 /或提供替代方法）... FML =）

DEMO：JSFiddle

---

修改

使用display:block/inline-block

时遇到同样的问题

JSFiddle

Answer 1

当你使用width: 100%时，你强迫div表成为那个宽度。请改用表格min-width: 100%，然后删除单元格的float: left和行的宽度。 请在此处查看：http://jsfiddle.net/C6UgT/1/

修改

如果要保持单元格的宽度并且只有当宽度大于正文时才在表格中获得水平滚动条，则必须将属性overflow-x: auto;和white-space: nowrap;添加到父元素（表）：

#table {
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;

}

并使用proprety display: inline-block;作为子元素（单元格）：

.cell {
    display: inline-block;
    margin: 1px;
    padding: 2px;
    min-width: 35%;
    background: #ff3434;
}

更新了小提琴：http://jsfiddle.net/C6UgT/5/

Answer 2

尝试重新调整单元格的宽度。