Table auf Div umbauen

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:
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&auml;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;">&nbsp;3.040&nbsp;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;">&nbsp;3.040&nbsp;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
 

Anhänge

  • fehler.jpg
    fehler.jpg
    94 KB · Aufrufe: 14
Wozu überhaupt eine Tabelle mit tabellarischen Daten durch diese <div>-Suppe ersetzen?

Genau für diese Art von Inhalte ist <table> semantisch vorgesehen.
 
Lt. dem Buch, das ich gerade lesen, sind Table für Responsive nicht gerade optimal weil anscheinend einige mobile Geräte, diese anders darstellen.

Wie kann man einen Table responsive machen?
 
Hallo

Tabellen sind für Tabellendaten. Wenn Tabellendaten vorliegen sollte also auch das table-Element verwendet werden. Da Tabellendaten nur in Tabellenform / -darstellung sinnvoll angezeigt werden können ist eine andere Darstellung für Tabellendaten unsinnig. Das wissen die Entwickler von HTML / CSS und haben deshalb für das table-Element auch kein responsive Design entwickelt.

Weiterhin wurde die Darstellung von table-Elementen und ihren Kindern der Darstellung für Tabellendaten angepasst. Kurz: Tabellen verhalten sich häufig anders als andere HTML-Elemente. Das ist so gewollt.

Gleiches gilt, wenn Tabellen per CSS nachgebaut werden. So können Listen oder Texte als Tabellen dargestellt werden, verhalten sich aber dann auch wie HTML-Tabellen.

In der Praxis sind Tabellendaten aber sehr selten. So handelt es sich auch in deinem Beispiel um keine Tabellendaten, sondern um eine Auflistung oder einen Text. Eine Quelltext-Erfassung als Liste oder Text ist deshalb korrekt.

Deine div-Suppe ist in jedem Fall auch falsch. div-Elemente sollten zum Beispiel niemals direkt Text enthalten. Dafür sind Elemente wie p, h1 bis h6, li, dt, dd und so weiter vorgesehen.

Leider beschreibst du bislang nur wie die Darstellung nicht sein soll. Um dir helfen zu können solltest du besser beschreiben, was du erreichen bist und wie sich die Darstellung bei breiten und schmalen Fenstern verhalten soll.

Gruss

MrMurphy
 
Wenn man unbedingt auf Tabellen verzichten möchte, wäre OL/UL und LI in Kombination mit "display: table" (etc.) zu empfehlen.

Dein Beispiel oben gehört aber meiner Meinung nach in eine Tabelle.
 
Recht geb ich dir Alice.
Aber wenns absolut nicht anders gehen soll versuchs mal so:

HTML:
<style>
.divTable{
    display: table;
    min-width: 100%;
}
.div-table-row {
display: table-row;
}
.divTableRow {
    display: table-header-group;  
    min-width:100%;
}
.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;
    min-width:25%;
}
.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;
}

</style>
<div class="divTable">
       <div class="divTableRow">
               <div class="divTableCell" style="width:80% !important;height: 25px;text-align:center;font-family:Verdana, Geneva, sans-serif;font-size:18px;border-right:0;">
           Hanger
       </div>
           <div class="divTableCell" style="border-left:0;text-align:center;width:20%;">
           Stand vom 07.10.2016</div>
               </div>
   </div>
</div>
<div class="divTable">
   <div class="divTableRow" style="min-width:100% !important;">
           <div class="divTableRow">
                   <div class="divTableCell">Holzart</div>
                   <div class="divTableCell">St&auml;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>
       <div class="divTableRow"><!--  Content Berichtaussenlager -->
                   <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> 
   </div>
</div>
 
Zuletzt bearbeitet:
Sorry für die späte Antwort und Danke für die vielen Antworten.

Ich hätte nicht gedacht, das ein Table so einfach auf Responsiv zu kriegen ist.

Ich hab es jetzt hingekriegt, werde mir die ganzen Links abspeichern und definitiv noch genauer studieren.
 
Zurück