html - Table using divs - no y overflow for row -

i trying create table using divs. (i can't use table, tr & td tags)

the problem is:

• my cells must next each other (i use float:left)
• my row should never expand vertically, can grow on x-axis.

so here 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 : website should working on ie6 (please avoid css3 / or provide alternative way) ... fml =)

demo : jsfiddle

---

edit

same problem using display:block/inline-block

jsfiddle

when you're using width: 100% you're forcing div table width. use min-width: 100% table instead , remove float: left of cell div's , width of row. see here: http://jsfiddle.net/c6ugt/1/

edit:

if want keep width of cells , horizontal scrollbar in table when width of wider body, must add property overflow-x: auto; , white-space: nowrap; parent element (table):

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

and use proprety display: inline-block; child elements (cells):

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

updated fiddle: http://jsfiddle.net/c6ugt/5/