Ganze Spalte per :hover verändern

[Alex]

Hi!

IMHO geht das mit reinem CSS nicht, weil sich die Spalten nicht hovern lassen, da die Zeilen drüber liegen.

Kommt drauf an. Das gefärbte "column"-Element muss ja nicht unbedingt ein echtes Spaltenelement sein ...
Idee:

• Die Tabelle wird relativ positioniert, damit sie als Referenz für absolute Positionierung verwendet werden kann. table { position:relative; }
• Zeilenmarkierung wie gehabt: tr:hover { background:#ff0; }
• Als Pseudo-Spalte erzeugen wir ein Kind der gehoverten td (oder th):
  td:hover:before
  {
    background:#fc0;
    bottom:0; /* bis zum unteren Ende der Tabelle */
    content:" ";
    position: absolute;
    top:0; /* bis zum oberen Ende der Tabelle */
    width:50px; /* gleiche width wie td */
    z-index:-1; /* hinter der td, um keinen Text zu verdecken */
  }

Klappt zumindest im Firefox und Chrome, andere Browser sind noch zu testen. Nachteil: Die td dürfen kein padding und kein text-align:center haben, ansonsten stimmt die horizontale Ausrichtung des :before-Elements nicht. (Dann muss man wohl für jede Spalte noch einen passenden left-Wert angeben.)

Noch nicht ganz ausgereift, aber vielleicht hilft die Idee ja. :)

Viele Grüße,
Alexander