Spalten fomatieren

[Willi]

Hallo liebe HTML- und sonstwas-Freaks :),
Ich habe eine Frage, die HTML sowie CSS betrifft.
Kann man es in einer Tabelle einrichten, dass neben einer Zeile auch eine Spalte farblich (per :hover in CSS) hervorgehoben wird?
Ich habe schon ein bisschen mit col experimentiert, aber keine Lösung gefunden.
(Siehe http://pcjwilli.pc.funpic.de/abi10-asg/stundenplan.htm)

Hoffe auf Antworten
Willi

[Mathias Brodala]

Hallo Willi.

Kann man es in einer Tabelle einrichten, dass neben einer Zeile auch eine Spalte farblich (per :hover in CSS) hervorgehoben wird?

Ausschließlich indem du den entsprechenden Tabellenzellen eine Klasse zuweist, da es so etwas wie ein tc-Element (tc = table column) leider nicht gibt.

Einen schönen Montag noch.

Gruß, Mathias

[Gunnar Bittersmann]

Hello out there!

Kann man es in einer Tabelle einrichten, dass neben einer Zeile auch eine Spalte farblich (per :hover in CSS) hervorgehoben wird?

Ausschließlich indem du den entsprechenden Tabellenzellen eine Klasse zuweist, da es so etwas wie ein tc-Element (tc = table column) leider nicht gibt.

Aber natürlich gibt es sowas!

Einfach in SELFHTML im Aufbau einer Tabelle den Abschnitt Spalten vordefinieren nachlesen.

#col2 {  
  background: yellow;  
}

angewandt auf

<table>  
  <col id="col1"/>  
  <col id="col2"/>  
  <col id="col3"/>  
  <tbody>  
    <tr>  
      <td>foo</td>  
      <td>bar</td>  
      <td>baz</td>  
    </tr>  
    <tr>  
      <td>foo</td>  
      <td>bar</td>  
      <td>baz</td>  
    </tr>  
  </tbody>  
</table>

funktioniert wunderbar.

Leider funktioniert das mit :hover im Firefox 1.5.0.6 nicht,

#col2:hover {  
  background: yellow;  
}

ist wirkungslos; warum auch immer. 'table:hover' und 'tr:hover' zeigen Wirkung.

See ya up the road,
Gunnar

[Willi]

Hallo,

Muss ich wohl doch mit Klassen in jeder Zelle arbeiten? Wenn Firefox das nicht erkennt...
@Cybaer: Kannst du vielleicht deine Antwort etwas präzisieren? Okay, ich habe nach Nachbarschaftsselektoren in CSS4You (http://www.css4you.de/wscss/css04.html#adjacentselector) gesucht - und gefunden - aber habe jetzt ehrlich gesagt keine Ahnung wie ich die dafür verwenden kann...

Hoffe auf antworten,
Grüße,
Willi

[Mathias Brodala]

Hallo Willi.

@Cybaer: Kannst du vielleicht deine Antwort etwas präzisieren? Okay, ich habe nach Nachbarschaftsselektoren in CSS4You (http://www.css4you.de/wscss/css04.html#adjacentselector) gesucht - und gefunden - aber habe jetzt ehrlich gesagt keine Ahnung wie ich die dafür verwenden kann...

Beispiel:

<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
    <td>Qux</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
    <td>Qux</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
    <td>Qux</td>
  </tr>
</table>

Nun das CSS, womit einzig die zweite Spalte einen Hover-Effekt erhält:

td+td:hover { /* Hover-Effekt für alle td-Elemente, welche einem anderen td-Element folgen */
  background:#069;
  color:#fff;
}
td+td+td:hover { /* Hover-Effekt für das zweite folgende td-Element wieder aufheben */
  background:inherit;
}

Womögliches Problem hierbei: es werden tatsächlich nur die Tabellenzellen und nicht die gesamte Spalte beim Hovern umgefärbt.

Ohne JavaScript wirst du den gewünschten Effekt also nicht erzielen können.

Einen schönen Montag noch.

Gruß, Mathias

[Gunnar Bittersmann]

Hello out there!

Nun das CSS, womit einzig die zweite Spalte einen Hover-Effekt erhält:

td+td:hover { /* Hover-Effekt für alle td-Elemente, welche einem anderen td-Element folgen */
  background:#069;
  color:#fff;
}
td+td+td:hover { /* Hover-Effekt für das zweite folgende td-Element wieder aufheben */
  background:inherit;
}

Bei dreispaltiger Tabelle machbar, bei mehreren Spalten recht aufwändig.

Wenn du aber nur die zweite Zelle haben willst, warum selektierst du dann nicht nur diese?

[code lang=css]td:first-child+td:hover { /* Hover-Effekt das zweite td-Element */
  background:#069;
  color:#fff;
}

See ya up the road,
Gunnar

[Mathias Brodala]

Hallo Gunnar.

Hello out there!

Kann man es in einer Tabelle einrichten, dass neben einer Zeile auch eine Spalte farblich (per :hover in CSS) hervorgehoben wird?

Ausschließlich indem du den entsprechenden Tabellenzellen eine Klasse zuweist, da es so etwas wie ein tc-Element (tc = table column) leider nicht gibt.

Aber natürlich gibt es sowas!

Doch dieses etwas wirkt auf mich immer wie gewollt und nicht gekonnt. Ein die Tabellenzellen umspannendes und zugleich spaltenbasierend anordnendes Element wäre hin und wieder von Nutzen.

Einen schönen Montag noch.

Gruß, Mathias

[Cybaer]

Hi,

Kann man es in einer Tabelle einrichten, dass neben einer Zeile auch eine Spalte farblich (per :hover in CSS) hervorgehoben wird?

Ja, such mal nach "Nachbarschaftsselektor". Der IE kennt den zwar nicht, aber er kann ja hier ohnehin kein :hover ... ;->

Gruß, Cybaer