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/