[css] dynamische Tabelle durch Container ersetzen


  • Guardian
  • 1660 Aufrufe 3 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [css] dynamische Tabelle durch Container ersetzen

    Hallo Leute,

    ich möchte meine älteren HTML Tabellen durch DIV Container ersetzen. Diese Tabellen haben 2 feste und eine variable breite Spalte (die mittlere). Und genau da weis ich nicht wie ich das in CSS umsetzen kann. Hier mal der vereinfachte Code:

    PHP-Quellcode

    1. <table style="width:300px;margin:0 auto;border:1px solid black;">
    2. <tr>
    3. <td style="width:25px;height:25px;text-align:left;background-color:#CCC;"></td>
    4. <td style="height:25px;text-align:left;background-color:#CCC;"></td>
    5. <td style="width:25px;height:25px;text-align:left;background-color:#CCC;"></td>
    6. </tr>
    7. <tr>
    8. <td style="width:25px;height:25px;text-align:left;background-color:#000;"></td>
    9. <td style="height:25px;text-align:left;background-color:#000;"></td>
    10. <td style="width:25px;height:25px;text-align:left;background-color:#000;"></td>
    11. </tr>
    12. </table>
    14. <div style="width:300px;margin:0 auto;border:1px solid black;">
    15. <div style="width:20px;height:25px;text-align:left;float:left;background-color:#CCC;"></div>
    16. <div style="height:25px;text-align:left;float:left;background-color:#CCC;"></div>
    17. <div style="width:20px;height:25px;text-align:left;background-color:#CCC;"></div>
    19. <div style="width:20px;height:25px;text-align:left;float:left;background-color:#000;"></div>
    20. <div style="height:25px;text-align:left;float:left;background-color:#000;"></div>
    21. <div style="width:20px;height:25px;text-align:left;background-color:#000;"></div>
    22. </div>
    Alles anzeigen


    Mit welchen CSS Attributen kann ich das umsetzen? Einer Zeile soll später mit einem :hover eine wechselnde Hintergrundfarbe zuwiesen werden, darum muss die mittlere Spalte über die gesamte restliche Breite gehen. Javascript ist ungeeignet da die Tabelle sehr viele Zeilen enthalten kann. Ich danke Euch schonmal im voraus.

    bye
    Guardian

  • meinste so:

    HTML-Quellcode

    1. <table style="width:300px;margin:0 auto;border:1px solid black;">
    2. <tr>
    3. <td style="width:25px;height:25px;text-align:left;background-color:#CCC;"></td>
    4. <td style="height:25px;text-align:left;background-color:#CCC;"></td>
    5. <td style="width:25px;height:25px;text-align:left;background-color:#CCC;"></td>
    6. </tr>
    7. <tr>
    8. <td style="width:25px;height:25px;text-align:left;background-color:#000;"></td>
    9. <td style="height:25px;text-align:left;background-color:#000;"></td>
    10. <td style="width:25px;height:25px;text-align:left;background-color:#000;"></td>
    11. </tr>
    12. </table>
    14. <div style="width:300px;margin:0 auto;border:1px solid black;">
    15. <div style="width:20px;height:25px;text-align:left;float:left;background-color:#CCC;"></div>
    16. <div style="width:20px;height:25px;text-align:left;float:right;background-color:#CCC;"></div>
    17. <div style="height:25px;text-align:left;background-color:#CCC;"></div>
    19. <div style="clear:both;"></div>
    21. <div style="width:20px;height:25px;text-align:left;float:left;background-color:#000;"></div>
    22. <div style="width:20px;height:25px;text-align:left;float:right;background-color:#000;"></div>
    23. <div style="height:25px;text-align:left;background-color:#000;"></div>
    24. </div>
    Alles anzeigen

    oder möchtest du da auch die zwischenräume haben?