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

Question

我正在尝试使用 div 创建一个表。 （我不能使用 table、tr 和 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 =)

演示：JSFiddle

---

编辑

使用display:block/inline-block时同样的问题

JSFiddle

Answer 1

当您使用 width: 100% 时，您会强制 div 表为该宽度。使用min-width: 100% 代替表格并删除单元格div 的float: left 和行的宽度。 在这里看到它：http://jsfiddle.net/C6UgT/1/

编辑：

如果你想保持单元格的宽度，并且只有当它的宽度比正文宽时才能在表格中获得一个水平滚动条，你必须在父元素中添加属性overflow-x: auto;和white-space: nowrap;（表）：

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

}

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

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

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

Answer 2

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