Stellen Sie sicher, dass sich Tabellenzellenlinks über die gesamte Zeilenhöhe erstrecken
Bei der Darstellung von Daten im Tabellenformat ist es oft wünschenswert, anklickbare Links innerhalb jeder Tabellenzelle zu erstellen . Um sicherzustellen, dass diese Links unabhängig von der Zellenhöhe voll funktionsfähig sind, sollten Sie die folgende Technik implementieren:
Wenden Sie in Ihrem CSS-Code die folgenden Stile an:
<code class="css">td {
overflow: hidden;
}
td a {
display: block; /* Allow links to fill the full height */
margin: -10em; /* Create a large negative vertical margin */
padding: 10em; /* Add an equal amount of vertical padding to compensate */
}</code>Indem Sie einen negativen Rand festlegen und passender Polsterung erzeugen Sie effektiv die Illusion, dass die Links die gesamte Zellenhöhe ausfüllen. Der negative Rand verschiebt den Inhalt des Links über den sichtbaren Bereich hinaus, während der Abstand vertikalen Platz hinzufügt, um ihn an die umgebende Tabellenzeile anzupassen.
Diese Lösung stellt sicher, dass auch dann, wenn eine Zelle mehrere Textzeilen enthält, während andere Zellen nur eine haben Einzeilig sind die Links in allen Zellen unabhängig von ihrer Höhe anklickbar. Benutzer können auf eine beliebige Stelle in der Zelle klicken, um die Aktion des Links auszulösen.
Beispiel-HTML-Code mit dem aktualisierten CSS:
<code class="html"><table border="1">
<tbody>
<tr>
<td><a href="link1.html">Cell 1 with multiple lines</a></td>
<td><a href="link2.html">Cell 2 with single line</a></td>
<td><a href="link3.html">Cell 3 with single line</a></td>
</tr>
</tbody>
</table></code>Das Ergebnis ist eine Tabelle, auf die Benutzer auf eine beliebige Stelle in einer Zelle klicken können Folgen Sie dem entsprechenden Link, auch in Zeilen mit unterschiedlichen Zellenhöhen.
Das obige ist der detaillierte Inhalt vonWie kann ich sicherstellen, dass sich Tabellenzellenverknüpfungen über die gesamte Zeilenhöhe erstrecken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
