CSS Tabellen simulieren

[Gremlin]

Hallo,
ich habe eine Auflistung einzelner Produkte im Code sieht das so aus:



<div class="option" id="product_1">
<span class="name">Produktname</span>
<a href="#" class="less"><img src="images/less.gif" alt="-" border="0" /></a>
<span class="quantity">1</span>
<span class="unit"></span>
<a href="#" class="more"> <img src="images/more.gif" alt="+" border="0" /> </a>
<input type="hidden" name="product[1]" value="1" />
</div>


Das äußere div#option steht für ein Produkt bzw. eine neue Reihe (<tr></tr>)
#name ist ein eigenes Feld, #less ist auch eins. #quantity und #unit stehen hintereinander zusammen in einem Feld
#more ist auch ein eigenes Feld.

Wie kann ich das machen das das ganze schön sortiert aussieht? Also quasi
eine Tabelle simuliert wird ;-)

Hoffe mich versteht einer :der:

[Gremlin]

Hallo,
habe es hinbekommen.



.configurator {
display: table;
}

.option {
display: table-row;
}


.name {
display: table-cell;
vertical-align: top;
font-weight:bold;
}

.dummy {
display: table-cell;
width:20px;
}


.less {
display: table-cell;
vertical-align: top;
}

.quantity {
display: table-cell;
vertical-align: top;
text-align:center;
}

.unit {
display: table-cell;
vertical-align: top;
text-align:center;
}

.more {
display: table-cell;
vertical-align: top;
}

.complete {
margin-top:20px;
}

.complete .name {
border-bottom: 3px double #000000;
display:inline;
}

.complete .price {
border-bottom: 3px double #000000;
}

.complete .unit {
border-bottom: 3px double #000000;
display:inline;
}



sind zwar noch paar Sachen mehr aber falls es jemanden interessiert. Das ganze geht mit display: table, table-row, table-cell

Gruß
cdp

[Freak4ever]

Mhmm sollte man nicht Tabellen dafür nutzen, für was sie auch da sind? Aber nette Lösung ;)

[Gremlin]

Mit Tabellen kann ich schwieriger mit Ajax arbeiten deshalb mach ich das nur mit divs und span.

Gruß
cdp