Table using divs - no y overflow for row

Question

I am trying to create a table using divs. (I can't use table, tr & td tags)

The problem is:

• my cells must be next to each other (I use float:left)
• My row should never expand vertically, but can grow on the x-axis.

So here is my 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>

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

}

Any suggestions ?

WARNING : My website should be working on IE6 (please avoid CSS3 / or provide an alternative way) ... FML =)

DEMO : JSFiddle

---

EDIT

Same problem using display:block/inline-block

JSFiddle

Answer 1

When you're using width: 100% you're forcing the div table to be that width. Use min-width: 100% for the table instead and remove the float: left of the cell div's and the width of the row. See it here: http://jsfiddle.net/C6UgT/1/

EDIT:

If you want to keep the width of the cells and get a horizontal scrollbar in the table only when the width of this is wider than the body, you must add the property overflow-x: auto; and white-space: nowrap; to the parent element (table):

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

}

And use the proprety display: inline-block; for the child elements (cells):

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

Updated fiddle: http://jsfiddle.net/C6UgT/5/

Answer 2

Try to re-size the width of the cell.