Einfaches Hervorheben von Zeilen und Spalten nur mit CSS

Das Hervorheben von Tabellenzeilen ist mit CSS ziemlich einfach. tr:hover { background: yellow; } funktioniert dort gut. Aber das Hervorheben von Spalten war schon immer etwas kniffliger, da es kein einzelnes HTML-Element gibt, das den Zellen einer Spalte übergeordnet ist. Ein Schuss JavaScript kann das leicht erledigen, aber Andrew Howe hat mir kürzlich eine kleine Methode geteilt, die er auf StackOverflow gefunden hat, gepostet von Matt Walton.

Es war ein paar Jahre alt, also dachte ich, ich würde es einfach aufräumen und hier posten.

Der Trick besteht darin, riesige Pseudo-Elemente an den <td>s zu verwenden, die durch den Tabellenüberlauf verborgen sind

Man weiß nicht wirklich, wie groß die Tabelle aus CSS-Sicht ist, also macht man die Pseudo-Elemente einfach super hoch mit einem negativen oberen Wert von der Hälfte davon.

table {
  overflow: hidden;
}

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

td, th {
  position: relative;
}
td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

Der negative z-index hält es unter dem Inhalt. Negativer z-index ist ein lustiger Trick, aber Vorsicht, diese Tabelle kann dann nicht mehr in andere Elemente mit Hintergründen verschachtelt werden, sonst geht die Hervorhebung darunter verloren.

Das können Sie hier in Aktion sehen

Sehen Sie den Pen Zeilen- und Spaltenhervorhebung nur mit CSS von Chris Coyier (@chriscoyier) auf CodePen.

Funktioniert es mit Touch?

Pseudo-Klassen für Hover funktionieren auf Touch-Geräten nur so halbwegs. Erstens muss das Element fokussierbar sein, was Tabellenzellen standardmäßig nicht sind. Sie könnten sicherlich einen Klick-Event-Handler an die Tabellenzellen anhängen und alles in JavaScript erledigen, aber hier ist eine Methode, um den Großteil der Arbeit in CSS zu belassen.

// Whatever kind of mobile test you wanna do.
if (screen.width < 500) {
  
  // :hover will trigger also once the cells are focusable
  // you can use this class to separate things
  $("body").addClass("nohover");

  // Make all the cells focusable
  $("td, th")
    .attr("tabindex", "1")
    // When they are tapped, focus them
    .on("touchstart", function() {
      $(this).focus();
    });
  
}

Dann fügen Sie in CSS auch :focus-Stile hinzu.

td:focus::after,
th:focus::after { 
  content: '';  
  background-color: lightblue;
  position: absolute;  
  left: 0;
  height: 10000px;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td:focus::before {
  background-color: lightblue;
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;
}

In meiner finalen Demo habe ich die CSS-Selektoren etwas ausgefeilter gestaltet, um sicherzustellen, dass leere Tabellenzellen nichts auslösen, Tabellenköpfe in <thead> nur Spalten auswählen und Tabellenköpfe in <tbody> nur Zeilen auswählen.

Das können Sie in der finalen Demo sehen. Und hier funktioniert Touch.