Wie erweitere ich Tabellenzellenverknüpfungen, um die Zeilenhöhe auszufüllen?

Erweitern von Tabellenzellenverknüpfungen, um die Zeilenhöhe auszufüllen

In einer tabellarischen Datenvisualisierung decken Zellverknüpfungen häufig nicht den gesamten vertikalen Raum von a ab Reihe, insbesondere wenn die Zellen unterschiedliche Höhen haben. Dies kann die Benutzerinteraktion behindern, da das Klicken auf eine teilweise abgedeckte Zelle möglicherweise nicht die gewünschte Aktion auslöst.

Um dieses Problem zu beheben, kann die folgende Technik angewendet werden:

Rand festlegen und Padding to Drive Link Extension

1. Überlauf anwenden: versteckt auf die übergeordneten Tabellenzellen.
2. Konvertieren Sie den Link mit display: block in ein Blockelement.
3. Legen Sie einen beliebig großen negativen Rand (z. B. -10em) und einen gleichen Abstand (z. B. 10em) für das Blockelement fest.

Beispielcode-Implementierung

<code class="css">td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}</code>

Diese Anpassung erweitert den Link über die Grenzen der Tabellenzelle hinaus und deckt effektiv die gesamte Zeilenhöhe ab. Benutzer können jetzt auf eine beliebige Stelle in der Zelle klicken, um den Link zu aktivieren, unabhängig davon, ob die Zelle mehrere Inhaltszeilen enthält.

Die aktualisierte JSFiddle-Demonstration finden Sie hier: http://jsfiddle.net/RXHuE/213/

Das obige ist der detaillierte Inhalt vonWie erweitere ich Tabellenzellenverknüpfungen, um die Zeilenhöhe auszufüllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!