Wie können Tabellenzellenverknüpfungen über die gesamte Zeilenhöhe erfolgen?

Erweitern von Tabellenzellenlinks, um die Zeilenhöhe auszufüllen

Beim Erstellen von Tabellen mit Zellen, die Links enthalten, ist es wünschenswert, dass der Benutzer überall klicken kann innerhalb einer Zelle und lösen die Aktion des Links aus. Wenn sich Zellen jedoch über mehrere Zeilen erstrecken, während andere in derselben Zeile weniger Zeilen haben, füllen die kürzeren Zellen möglicherweise nicht den gesamten vertikalen Raum der Zeile aus.

Um dieses Problem zu beheben, besteht ein gängiger Ansatz darin, die verknüpften Zellen festzulegen Mit der display:block-Eigenschaft können Sie Elemente innerhalb der Zellen so verhalten, dass sie sich wie Blockelemente verhalten. Dadurch können die Links auf die volle Breite und Höhe der Zelle erweitert werden. In Fällen, in denen einige Zellen jedoch mehrere Zeilen haben, können die einzeiligen Zellen optisch immer noch kürzer erscheinen.

Eine Lösung für dieses Problem besteht darin, einen negativen Rand und einen gleichmäßigen Abstand auf das Blockelement anzuwenden. Der negative Rand sorgt dafür, dass sich das Blockelement über die Grenzen der Zelle hinaus erstreckt, während der Abstand verhindert, dass der Text den Inhalt der Zelle überlappt. Darüber hinaus verhindert das Festlegen der Überlaufeigenschaft der übergeordneten Tabellenzelle auf „Ausgeblendet“ den Überlauf von Inhalten außerhalb der Zellgrenzen.

Beachten Sie den folgenden aktualisierten CSS-Code:

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

Mit diesen Anpassungen wird die Links in Tabellenzellen werden so gedehnt, dass sie die gesamte Zeilenhöhe ausfüllen, wodurch ein einheitliches Erscheinungsbild aller Zellen gewährleistet wird, unabhängig von ihrer Inhaltslänge.

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