1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Table auf Div umbauen

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von nchristoph, 7. Oktober 2016.

  1. nchristoph

    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:
    1. <div class="divTable">
    2.     <div class="divTableRow">
    3.         <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">
    4.         <div class="divTableRow">
    5.             <div class="divTableCell" style="width:10%">Holzart</div>
    6.             <div class="divTableCell">St&auml;rke</div>
    7.             <div class="divTableCell">Klasse</div>
    8.             <div class="divTableCell">HF</div>
    9.             <div class="divTableCell">Partie</div>
    10.             <div class="divTableCell">Kubik</div>
    11.             <div class="divTableCell">Preis</div>
    12.             <div class="divTableCell">Summe</div>
    13.         </div><!--  Content Berichtaussenlager -->
    14.         <div class="divTableRow">
    15.             <div class="divTableCell">Nuss amerik rund</div>
    16.             <div class="divTableCell">-</div>
    17.             <div class="divTableCell">A</div>
    18.             <div class="divTableCell">AD</div>
    19.             <div class="divTableCell">70024</div>
    20.             <div class="divTableCell">3.040 </div>
    21.             <div class="divTableCell">€ 700.00</div>
    22.             <div class="divTableCell">€ 2128.00</div>
    23.         </div>
    24.         <!-- Conten Berichtaussenlager --></div>  
    25.     <div class="beide">
    26.         <div class="divTable">
    27.             <div class="divTableRow">
    28.                 <div class="divTableCell" style="text-align:left;">Nuss amerik rund -:</div><div class="divTableCell" style="text-align:right;">&nbsp;3.040&nbsp;</div><div class="divTableCell" style="text-align:right;">€ 2128.00</div>
    29.             </div>
    30.             <div class="divTableRow">
    31.                 <div class="divTableCell" style="text-align:left;">Gesamt:</div>
    32.                 <div class="divTableCell" style="text-align:right;">&nbsp;3.040&nbsp;</div><div class="divTableCell" style="text-align:right;">€ 2128.00</div></div></div>
    33.     </div>
    34. </div>
    Hier der dazugehörige CS Code
    Code (CSS):
    1. .divTable{
    2.     display: table;
    3.     width: 100%;
    4. }
    5. .divTableRow {
    6.     display: table-row;
    7. }
    8. .divTableRowa {
    9.     display: table-header-group;
    10. }
    11. .divTableHeading {
    12.     background-color: #EEE;
    13.     display: table-header-group;
    14. }
    15. .divTableCell, .divTableHead {
    16.     border: 1px solid #999999;
    17.     display: table-cell;
    18.     padding: 3px 10px;
    19. }
    20. .divTableCell {
    21.     border: 1px solid #999999;
    22.     display: table-cell;
    23.     padding: 3px 10px;
    24. }
    25.  
    26. .divTableHeading {
    27.     background-color: #EEE;
    28.     display: table-header-group;
    29.     font-weight: bold;
    30. }
    31. .divTableFoot {
    32.     background-color: #EEE;
    33.     display: table-footer-group;
    34.     font-weight: bold;
    35. }
    36. .divTableBody {
    37.     display: table-row-group;
    38. }
    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:

  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Wozu überhaupt eine Tabelle mit tabellarischen Daten durch diese <div>-Suppe ersetzen?

    Genau für diese Art von Inhalte ist <table> semantisch vorgesehen.
     
  3. nchristoph

    nchristoph Erfahrenes Mitglied

    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?
     
  4. sheel

    sheel I love Asm Administrator

  5. MrMurphy

    MrMurphy Mitglied

    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
     
  6. madmix1

    madmix1 Grünschnabel

    Versuch mal alle deine Div Klassen auf 100% zu setzen und nutze min bzw. max-width.
     
  7. Alice

    Alice Erfahrenes Mitglied

    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.
     
  8. madmix1

    madmix1 Grünschnabel

    Recht geb ich dir Alice.
    Aber wenns absolut nicht anders gehen soll versuchs mal so:

    HTML:
    1. .divTable{
    2.     display: table;
    3.     min-width: 100%;
    4. }
    5. .div-table-row {
    6. display: table-row;
    7. }
    8. .divTableRow {
    9.     display: table-header-group;  
    10.     min-width:100%;
    11. }
    12. .divTableHeading {
    13.     background-color: #EEE;
    14.     display: table-header-group;
    15. }
    16. .divTableCell, .divTableHead {
    17.     border: 1px solid #999999;
    18.     display: table-cell;
    19.     padding: 3px 10px;
    20. }
    21. .divTableCell {
    22.     border: 1px solid #999999;
    23.     display: table-cell;
    24.     padding: 3px 10px;
    25.     min-width:25%;
    26. }
    27. .divTableHeading {
    28.     background-color: #EEE;
    29.     display: table-header-group;
    30.     font-weight: bold;
    31.  
    32. }
    33. .divTableFoot {
    34.     background-color: #EEE;
    35.     display: table-footer-group;
    36.     font-weight: bold;
    37. }
    38. .divTableBody {
    39.     display: table-row-group;
    40. }
    41.  
    42. <div class="divTable">
    43.        <div class="divTableRow">
    44.                <div class="divTableCell" style="width:80% !important;height: 25px;text-align:center;font-family:Verdana, Geneva, sans-serif;font-size:18px;border-right:0;">
    45.            Hanger
    46.        </div>
    47.            <div class="divTableCell" style="border-left:0;text-align:center;width:20%;">
    48.            Stand vom 07.10.2016</div>
    49.                </div>
    50.    </div>
    51. </div>
    52. <div class="divTable">
    53.    <div class="divTableRow" style="min-width:100% !important;">
    54.            <div class="divTableRow">
    55.                    <div class="divTableCell">Holzart</div>
    56.                    <div class="divTableCell">St&auml;rke</div>
    57.                    <div class="divTableCell">Klasse</div>
    58.                    <div class="divTableCell">HF</div>
    59.                    <div class="divTableCell">Partie</div>
    60.                    <div class="divTableCell">Kubik</div>
    61.                    <div class="divTableCell">Preis</div>
    62.                    <div class="divTableCell">Summe</div>
    63.            </div>
    64.        <div class="divTableRow"><!--  Content Berichtaussenlager -->
    65.                    <div class="divTableCell">Nuss amerik rund</div>
    66.                    <div class="divTableCell">-</div>
    67.                    <div class="divTableCell">A</div>
    68.                    <div class="divTableCell">AD</div>
    69.                    <div class="divTableCell">70024</div>
    70.                    <div class="divTableCell">3.040 </div>
    71.                    <div class="divTableCell">€ 700.00</div>
    72.                    <div class="divTableCell">€ 2128.00</div>
    73.            </div>
    74.    </div>
    75. </div>
     
    Zuletzt bearbeitet: 7. Oktober 2016
  9. MrMurphy

    MrMurphy Mitglied

    Hallo

    Ich habe mal ein Beispiel mit einem responsive Layout zum direkten Ausprobieren erstellt:

    http://boratb.bplaced.net/index05.html

    Der fehlende Teil kann analog erstellt werden.

    Gruss

    MrMurphy
     
  10. nchristoph

    nchristoph Erfahrenes Mitglied

    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.
     
Die Seite wird geladen...