Unterschiedliche Formatierung 2er Tabellen in einer Datei

[Andreas]

Hallo,

mich quält das Problem, dass ich auf einer Seite zwei grundlegend verschiedene
Tabellenformatierungen verwenden möchte, ich dieses Vorhaben aber nicht umgesetzt
bekomme.

Eine Tabelle soll u.a. einen Rahmen und Innenabstände haben sowie bei MouseOver
die gesamte Zeile farbig hinterlegen, während die andere Tabelle weder einen
Rahmen noch einen farbigen Hintergrund bei MouseOver haben soll.

Mein Vorhaben mit dem Rahmen bekomme ich hin, was ich nicht "wegbringe", ist der
MouseOver-Effekt.

Wobei ich mit meiner Lösung, den Rahmen zu unterdrücken, gar nicht zufrieden bin,
weil es den Code sehr aufbläht:

Tabelle 1:

<table class="Baumstruktur">
        <tr class="Baumstruktur">
           <td class="Baumstruktur">...</td>
           <td class="Baumstruktur">...</td>
        </tr>
        <tr id="Filter">
           <td class="Baumstruktur"></td>
           <td class="Baumstruktur">
              <table class="Baumstruktur">
     ...usw...

In dieser Tabelle habe ich ein Baummenü unter Zuhilfenahme von Tabellen realisiert.

Die Tabelle 2 hat keine Klassenzuweisung, hier werden die Tags direkt formatiert:

<table>
        <tr>
           <td>...</td>
           <td>...</td>
           <td>...</td>
        </tr>
     </table>

Die css-Definitionen sehen wie folgt aus:

table,
     table.Baumstruktur
     {
        border-collapse: collapse;
     }

td,
     th
     {
        font-family:     Verdana;
        color:           #b2b2b2;
        font-weight:     bold;
        border:          1px #7b7d7b solid;
        padding:         7px;
     }

th
     {
        font-size:        16px;
        text-align:       left;
        background-color: #636563;
     }

td
     {
        font-size:       10px;
     }

tr.Baumstruktur,
     td.Baumstruktur
     {
        border:0;
     }

tr.Baumstruktur:hover
     {
     }

tr
     {
        background-color: #525552;
     }

tr:hover
     {
        background-color: #636563;
     }

Wie schaffe ich es, den MouseOver-Effekt bei Tabelle 1 ("Baumstruktur") wegzubekommen?
Wie kann ich den Code der Tabelle 1 schlanker notieren?

Vielen Dank für Eure Tips, Ratschläge und Hilfestellungen.

Gruß
Andreas

[Beat]

Wie schaffe ich es, den MouseOver-Effekt bei Tabelle 1 ("Baumstruktur") wegzubekommen?
Wie kann ich den Code der Tabelle 1 schlanker notieren?

Vielleicht solltest du:
a) Baumstrukturen mit Listen statt Tabellen darstellen
b) Identifier verwenden id="tree1"
c) im CSS die Identifier ansprechen
   #tree1
d) die CSS Selektoren > studieren http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente

mfg Beat

[Tom]

Hello,

Vielleicht solltest du:
a) Baumstrukturen mit Listen statt Tabellen darstellen

Da haben wir doch neulich etwas gebastelt:
http://selfhtml.bitworks.de/forum/get_thread_titles_05.01.php

Liebe Grüße aus Syburg bei Dortmund

Tom vom Berg

[Atom Waffel]

Hallo Andreas,
dadurch das du Tabelle 2 keine klasse zugeteilt hast werden die Eigenschaften von Tabelle 2 auch in Tabelle 1 übernommen.
Die einfachere Lösung wäre es einfach deinem CSS diese Zeilen hinzuzufügen:

  
tr.Baumstruktur:hover  
     {  
     background-color: #525552;  
     }  

Jedoch wäre es eine schönere Lösung Tabelle 2 auch eine Klasse zuzuweisen,
z.B. class="Baumstruktur2".

Mit freundlichen Grüßen,
Atom Waffel