Wie mache ich Tabellenzellenverknüpfungen über die gesamte Zeilenhöhe anklickbar?

Tabellenzeile vertikal mit Zellverknüpfungen füllen

In HTML-Tabellen erwarten Benutzer, dass sie auf eine beliebige Stelle innerhalb einer Zelle klicken können, um der zugehörigen Zeile zu folgen Link. Wenn sich Tabellenzellen jedoch über mehrere Zeilen erstrecken und andere einzeilig sind, nehmen die einzeiligen Zellen möglicherweise nicht den gesamten vertikalen Raum der Zeile ein.

Um dieses Problem zu beheben, legen Sie die Anzeigeeigenschaft von Tabellenzellenverknüpfungen fest Blockieren ist ein gängiger Ansatz. Dies löst das Problem jedoch möglicherweise nicht in allen Fällen vollständig.

Lösung

Um sicherzustellen, dass Tabellenzellenverknüpfungen die gesamte Zeilenhöhe ausfüllen, implementieren Sie die folgende CSS-Regel:

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

Durch Festlegen eines beliebig großen negativen Rands und gleichen Abstands für das Blockelement erstreckt sich der Link über den gesamten vertikalen Raum der Tabellenzeile. Die Überlaufeigenschaft ist auf dem übergeordneten td-Element ausgeblendet, um zu verhindern, dass die übermäßige Auffüllung außerhalb der Zelle verschüttet wird.

Beispiel

<code class="html"><td style="overflow: hidden;">
    <a style="display: block; margin: -10em; padding: 10em;" href="http://www.google.com/">Cell 1</a>
</td></code>

Dieses aktualisierte CSS sorgt dafür dass Tabellenzellen, die Links enthalten, immer über ihre gesamte Höhe anklickbar sind, unabhängig von der Anzahl der Zeilen, die sie umfassen.

Das obige ist der detaillierte Inhalt vonWie mache ich Tabellenzellenverknüpfungen über die gesamte Zeilenhöhe anklickbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!