如何使表格單元格連結在整個行高上都可按一下？

使用單元格鏈接垂直填充表格行

在HTML 表格中，用戶希望能夠單擊單元格內的任意位置來跟踪關聯的內容關聯。但是，當表格單元格跨多行且其他單元格為單行時，單行單元格可能不會佔據行的整個垂直空間。

要解決此問題，請設定表格單元格連結的顯示屬性阻止是一種常見的做法。但是，這可能無法在所有情況下完全解決問題。

解決方案

要確保表格單元格連結填入整個行高，請實作下列 CSS 規則：

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

透過在區塊元素上設定任意大的負邊距和相等的填充，連結將跨越表格行的整個垂直空間。將溢出屬性設為隱藏在父 td 元素上，以防止過多的填充溢出到單元格之外。

範例

<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>

此更新的 CSS 將確保包含連結的表格單元格在其整個高度上始終可單擊，無論它們跨越多少行。

以上是如何使表格單元格連結在整個行高上都可按一下？的詳細內容。更多資訊請關注PHP中文網其他相關文章！