CSS Simples CSS-Problem

[darton]

Hallo!
Ich habe folgenden Code:

<table class="main">
            <tbody>
                <tr>
                    <td>bla</td>
                    <td>blabla</td>
                </tr>
            </tbody>
</table>

Eine fast gleiche Tabelle hab ich noch woanders, nur mit der Klasse "other". Wenn ich die Tabellen nun wie folgt durch CSS stylen möchte,

table.main td, th {
    border: 1px solid #03476F;
    padding: .4em;     
}
table.other td, th {    
    padding: .5em;
    padding-right: 60px;
}

dann werden die beiden Klassen irgendwie nicht getrennt voneinander betrachtet, d.h. der Code für "other" gilt auch für "main" und andersrum. Was muss ich ändern, dass dies nicht mehr passiert?

 

[Augen1337]

Gib den Tables doch IDs.

 

[darton]

Du meinst:

<table id="main">
            <tbody>
                <tr>
                    <td>bla</td>
                    <td>blabla</td>
                </tr>
            </tbody>
</table>

table#main td, th {
    border: 1px solid #03476F;
    padding: .4em;     
}
table#other td, th {    
    padding: .5em;
    padding-right: 60px;
}

Das verändert leider auch nichts.

 

[geodreieck24]

table.main td,
table.main th {
    border: 1px solid #03476F;
    padding: .4em;     
}
table.other td,
table.other th {    
    padding: .5em;
    padding-right: 60px;
}

 

[Mr. Snoot]

Eigentlich müsste es heißen:

table.main td, table.main th { }
table.other td, table.other th { }

Ansonsten gilt die Formatierung für alle ths.

Allerdings sollte das Format für td schon korrekt angewendet werden. Prüf doch mal mi IE mit den entwicklertools (F12) oder in Firefox mit Firebug oder in Chrome über Rechtsklick | Element untersuchen, welches Stylesheet auf die Tabelle angewendet wird. Wenn dort bei beiden Tabellen beide Formatierungen angezeigt werden, stimmt was nicht.

 

[darton]

Eigentlich müsste es heißen:

table.main td, table.main th { }
table.other td, table.other th { }

Ansonsten gilt die Formatierung für alle ths.

Allerdings sollte das Format für td schon korrekt angewendet werden. Prüf doch mal mi IE mit den entwicklertools (F12) oder in Firefox mit Firebug oder in Chrome über Rechtsklick | Element untersuchen, welches Stylesheet auf die Tabelle angewendet wird. Wenn dort bei beiden Tabellen beide Formatierungen angezeigt werden, stimmt was nicht.

Jo, wenn ich es mache wie du, funktioniert es. Firebug wendet übrigens automatisch das richtige Stylesheet an. Allerdings macht es der Firefox nicht so.

 

[Kagee]

nach meinem verständnis reagiert hier der Firefox "richtig"

-> http://www.w3.org/TR/CSS2/selector.html

 

[Eagle-PsyX-]

@Kagee
Erkläre das bitte.

When several selectors share the same declarations, they may be grouped into a comma-separated list.

Einmal wird hier table.main td und einmal th selektiert, und zwar ALLE <th>s und nicht NUR von der Tabelle mit der Klasse main.

 

[Mr. Snoot]

Firebug wendet übrigens automatisch das richtige Stylesheet an. Allerdings macht es der Firefox nicht so.

Wie meinst du das? Firebug zeigt doch nur das, was Firefox macht!?

 

[mustermen]

Hey du darfst nicht table davor schreiben! Du musst table einfach weglöschen im CSS!

Einfach table löschen wie hier:

.main td, .main th {
    border: 1px solid #03476F;
    padding: .4em;     
}
.other td, .other th {    
    padding: .5em;
    padding-right: 60px;
}

 

[Agratos]

Natürlich kann er da table vorschreiben, das heißt lediglich, dass die Klasse nur für Tabellen gilt. Der Code von geodreieck und snoot ist vollkommen richtig.