nchristoph
Erfahrenes Mitglied
Hallo Zusammen,
ich bin gerade dabei ein Design von Statisch auf Responsive umzubauen und habe folgendes Problem.
Ein Table muss auf Div umgebaut werden, was auch funktioniert so weit so gut. Leider lässt sich die Breite der Divs nicht korrigieren bzw. verhalten Sich die Divs "komisch".
Ich habe es bereits mit Inlinestyles und eigenen Klassen und Id's für die einzelnen Divs versucht. Der width Parameter wird allerdings ignoriert.
Des weiteren werden die Divs irgendwie miteinander verbunden obwohl die Tag Reihenfolge stimmt. Kkeine Ahnung wie ich ich das besser beschreiben soll.
Hier mal der Code:
Hier der dazugehörige CS Code
Irgendwie hab ich das Gefühl, das der Fix relativ einfach sein wird, ich steh allerdings aufn Schlauch.
Ein Screen wie das ganze aussieht wäre sicher auch nicht schlecht.
Hat eventuell Irgendwer ne Idee?
mfg
Christoph
ich bin gerade dabei ein Design von Statisch auf Responsive umzubauen und habe folgendes Problem.
Ein Table muss auf Div umgebaut werden, was auch funktioniert so weit so gut. Leider lässt sich die Breite der Divs nicht korrigieren bzw. verhalten Sich die Divs "komisch".
Ich habe es bereits mit Inlinestyles und eigenen Klassen und Id's für die einzelnen Divs versucht. Der width Parameter wird allerdings ignoriert.
Des weiteren werden die Divs irgendwie miteinander verbunden obwohl die Tag Reihenfolge stimmt. Kkeine Ahnung wie ich ich das besser beschreiben soll.
Hier mal der Code:
HTML:
<div class="divTable">
<div class="divTableRow">
<div class="divTableCell" style="height: 25px;text-align:center;font-family:Verdana, Geneva, sans-serif;font-size:18px;border-right:0;">Hanger</div><div class="divTableCell" style="order-left:0;text-align:center;">Stand vom 07.10.2016</div></div><div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell" style="width:10%">Holzart</div>
<div class="divTableCell">Stärke</div>
<div class="divTableCell">Klasse</div>
<div class="divTableCell">HF</div>
<div class="divTableCell">Partie</div>
<div class="divTableCell">Kubik</div>
<div class="divTableCell">Preis</div>
<div class="divTableCell">Summe</div>
</div><!-- Content Berichtaussenlager -->
<div class="divTableRow">
<div class="divTableCell">Nuss amerik rund</div>
<div class="divTableCell">-</div>
<div class="divTableCell">A</div>
<div class="divTableCell">AD</div>
<div class="divTableCell">70024</div>
<div class="divTableCell">3.040 </div>
<div class="divTableCell">€ 700.00</div>
<div class="divTableCell">€ 2128.00</div>
</div>
<!-- Conten Berichtaussenlager --></div>
<div class="beide">
<div class="divTable">
<div class="divTableRow">
<div class="divTableCell" style="text-align:left;">Nuss amerik rund -:</div><div class="divTableCell" style="text-align:right;"> 3.040 m³</div><div class="divTableCell" style="text-align:right;">€ 2128.00</div>
</div>
<div class="divTableRow">
<div class="divTableCell" style="text-align:left;">Gesamt:</div>
<div class="divTableCell" style="text-align:right;"> 3.040 m³</div><div class="divTableCell" style="text-align:right;">€ 2128.00</div></div></div>
</div>
</div>
Hier der dazugehörige CS Code
CSS:
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableRowa {
display: table-header-group;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableCell {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
Irgendwie hab ich das Gefühl, das der Fix relativ einfach sein wird, ich steh allerdings aufn Schlauch.
Ein Screen wie das ganze aussieht wäre sicher auch nicht schlecht.
Hat eventuell Irgendwer ne Idee?
mfg
Christoph