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

[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