PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [HTML/CSS/JS] CSS Tabellen simulieren



Gremlin
12.09.2008, 20:23
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
13.09.2008, 23:43
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
15.09.2008, 18:37
Mhmm sollte man nicht Tabellen dafür nutzen, für was sie auch da sind? Aber nette Lösung ;)

Gremlin
17.09.2008, 00:05
Mit Tabellen kann ich schwieriger mit Ajax arbeiten deshalb mach ich das nur mit divs und span.

Gruß
cdp