Klassen mit Tabellen möglich?

[Marco]

Hallo Ihr,

ich habe mal eine Frage zu Klassen und Tabellen in CSS. Ich würde gerne für
<table>
eine Klasse 'speiseplan' erzeugen. In meiner CSS-Datei mache ich das mit
table.speiseplan{border-collapse:separate;}

In meiner HTML-Datei schreibe ich dann
<table class="speiseplan">
...

Das funktioniert aber leider nicht. Geht das überhaupt?

Vielen Dank für eure Hilfe!

Gruß, Marco

[Cheatah]

Hi,

Das funktioniert aber leider nicht. Geht das überhaupt?

CSS sieht nicht den geringsten Unterschied zwischen <table>, <div>, <p>, <strong>, <dfn> oder <title>. Es sind einfach nur Elemente des Strukturdokuments, mehr nicht. Was mit dem einen geht, geht *immer* auch mit jedem anderen - für CSS gelten nur und ausschließlich CSS-Regeln.

Cheatah

[Marco]

Super, danke, es funktioniert mit <table>.

Aber jetzt kommt ein neues Problem dazu: Ich habe auch den Tabellenreihen mit 'tr.speiseplanTR' eine Klasse hinzugefügt. Leider kann ich damit die Rahmeneigenschaften nicht ändern:

table.speisepla{border-collapse:separate; border: solid 1px; border-color:gray;}
tr.speiseplanTR{border-collapse:separate; border: solid 1px; border-color:gray; vertical-align:top; text-align:center;}

Es wird nur ein Rahmen um die komplette Tabelle angezeigt, aber nicht um die Zeilen und Spalten. Müsste das so funktionieren (s. oben)? Früher habe ich ohne Klassen gearbeitet (nur mit tr{...}). Da hat es funktioniert, jetzt, nachdem ich bei table Klassen einsetzt, kann ich weder mit tr ohne oder mit Klassen nichts mehr ändern.

Vielen Dank für eure Hilfe!

Gruß, Marco

[Gunnar Bittersmann]

Hello out there!

table.speisepla{border-collapse:separate; border: solid 1px; border-color:gray;}
tr.speiseplanTR{border-collapse:separate; border: solid 1px; border-color:gray; vertical-align:top; text-align:center;}

Es wird nur ein Rahmen um die komplette Tabelle angezeigt, aber nicht um die Zeilen und Spalten. Müsste das so funktionieren (s. oben)?

Nein. Schau dir mal in Kapitel 17.6 Rahmen [CSS2] an, warum nicht. Dort findest du beschrieben, wie die Eigenschaft 'border-collapse' wirkt und auf welche Elmente.

Und wenn du die Angaben gesammelt in der 'border'-Eigenschaft angibst, warum dann nicht auch die Farbe dort?

See ya up the road,
Gunnar

[Marco]

Hallo Gunnar,

danke für deine Info. Leider funktioniert das ganze nicht so, wie es soll. Ich habe folgendes in meine CSS-Datei eingetragen:

table.speiseplan{border-collapse:separate;}
tr.speiseplanTR{border: solid 1px; border-color:yellow; vertical-align:top; text-align:center;}

leider wird KEIN Rahmen angezeigt, weder um die komplette Tabelle noch um die einzelnen Zellen, und ich habe doch hier keinen Konflikt, odr stehe ich da auf dem Schlauch?
Wenn ich bei table noch 'border: solid 1px' eintrage, dann ist wenigstens um die Tabelle ein Rahmen. Alle anderen Eigenschaften funktionieren (vertical-align usw), nur die Geschichte mit dem Rahmen nicht...

Ich glaube, ich stehe wirklich auf dem Schlauch...

Vielen Dank!

Gruß, Marco

[Gunnar Bittersmann]

Hello out there!

table.speiseplan{border-collapse:separate;}

Gehe zurück zur Badstraße.

See ya up the road,
Gunnar

[Marco]

table.speiseplan{border: solid 1px;}
tr.speiseplanTR{border-collapse:separate; border: solid 1px; border-color:yellow; vertical-align:top; text-align:center;}

...geht auch nicht (so auf die schnelle). Na ja, werde mir das ganze morgen nochmal ansehen. Vielen Dank für den Tipp, jetzt weiß ich wenigstens, wo ich suchen muss...

Schönen Abend noch!

Gruß, Marco

[Martin Hölter]

Hi!

Nur noch ein Tipp:

Ersetze

tr.speiseplanTR ...

durch

table.speiseplan tr ...

Dann brauchst du nicht jeder Zeile ne eigene Klasse zuweisen, siehe http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente

Gruß aus Iserlohn

Martin

[Marco]

Hallo Martin,

vielen Dank für den Tipp, ich dachte schon, ich muss jede Zelle bzw. Zeile extra ausweisen...

Jetzt muss ich nur noch das mit dem Rahmen hinbekommen...

Vielen Dank nochmal.

Gruß, Marco

Hi!

Nur noch ein Tipp:

Ersetze

tr.speiseplanTR ...

durch

table.speiseplan tr ...

Dann brauchst du nicht jeder Zeile ne eigene Klasse zuweisen, siehe http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente

Gruß aus Iserlohn

Martin

[Gunnar Bittersmann]

Hello out there!

Jetzt muss ich nur noch das mit dem Rahmen hinbekommen...

Und das mit dem Zitieren. Bitte kein TOFU.

See ya up the road,
Gunnar

PS: Die zu den Rahmen gegebenen Hinweise sollten ausreichen, wenn du sie genau liest.

[Martin Hölter]

Hi!

Funktioniert doch:

<?xml version="1.0"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
  <head>  
    <title>test</title>  
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
    <style type="text/css">  
   table{  
   border-collapse:collapse;  
 border:1px solid red;  
}  
  table *{  
 border:1px solid blue;  
}  
   table.speiseplan{  
 border-collapse:separate;  
}  
    </style>  
  </head>  
  <body>  
  <table>  
 <tr>  
  <td>1</td>  
  <td>2</td>  
 </tr>  
 <tr>  
  <td>3</td>  
  <td>4</td>  
 </tr>  
  </table>  
  <table class="speiseplan">  
 <tr>  
  <td>1</td>  
  <td>2</td>  
 </tr>  
 <tr>  
  <td>3</td>  
  <td>4</td>  
 </tr>  
  </table>  
  </body>  
</html>

Gruß aus Iserlohn

Martin