如何擴展表格單元格連結以填充行高？

擴展表格單元格連結以填充行高

在表格資料視覺化中，單元格連結通常無法覆蓋表格的整個垂直空間行，特別是當單元格具有不同的高度時。這可能會阻礙用戶交互，因為單擊部分覆蓋的單元格可能不會觸發所需的操作。

要修正此問題，可以採用以下技術：

設定邊距和填充驅動連結擴充

1. 將溢位：隱藏應用於父表格儲存格。
2. 使用 display: block 將連結轉換為區塊元素。
3. 為塊元素設定任意大的負邊距（例如-10em）和等量的填充（例如10em）。

範例程式碼實作

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

此調整將連結擴展到表格單元格的邊界之外，有效地覆蓋了整個行高。用戶現在可以單擊單元格中的任意位置來激活鏈接，無論單元格是否有多行內容。

請參閱此處更新的 JSFiddle 示範：http://jsfiddle.net/RXHuE/213/

以上是如何擴展表格單元格連結以填充行高？的詳細內容。更多資訊請關注PHP中文網其他相關文章！