如何使表格單元格連結跨越整個行高？
擴充表格儲存格連結以填入行高
使用包含連結的儲存格建立表格時，最好允許使用者點擊任意位置在儲存格內並觸發連結的操作。但是，當單元格跨越多行而同一行中的其他單元格行數較少時，較短的單元格可能無法填充該行的整個垂直空間。
要解決此問題，常見的方法是設定連結使用 display: block 屬性將單元格內的元素表現為區塊元素。這允許連結擴展到單元格的整個寬度和高度。但是，在某些單元格具有多行的情況下，單行單元格在視覺上仍然會顯得更短。
解決此問題的方法是對塊元素應用負邊距和相等的填充。負邊距可確保區塊元素擴展到單元格的邊界之外，而填滿可防止文字與儲存格的內容重疊。此外，將父表格儲存格的溢出屬性設定為隱藏可以防止內容溢出儲存格邊界之外。
考慮以下更新的CSS 代碼：
td {
overflow: hidden;
}
td a {
display: block;
margin: -10em;
padding: 10em;
}透過這些調整，表格單元格內的連結將拉伸以填充整個行高，確保所有單元格的外觀一致，無論其內容長度如何。
以上是如何使表格單元格連結跨越整個行高？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
揭開屏幕讀取器的神秘面紗：可訪問的表格和最佳實踐
Mar 08, 2025 am 09:45 AM
這是我們在形式可訪問性上進行的小型系列中的第三篇文章。如果您錯過了第二篇文章，請查看“以：focus-visible的管理用戶焦點”。在
將框陰影添加到WordPress塊和元素
Mar 09, 2025 pm 12:53 PM
CSS盒子陰影和輪廓屬性獲得了主題。讓我們查看一些在真實主題中起作用的示例，以及我們必須將這些樣式應用於WordPress塊和元素的選項。
使用智能表單框架創建JavaScript聯繫表格
Mar 07, 2025 am 11:33 AM
本教程演示了使用智能表單框架創建外觀專業的JavaScript表單（注意：不再可用）。 儘管框架本身不可用，但原理和技術仍然與其他形式的建築商相關。
比較5個最佳的PHP形式構建器（和3個免費腳本）
Mar 04, 2025 am 10:22 AM
本文探討了Envato Market上可用的PHP表單構建器腳本，比較了其功能，靈活性和設計。 在研究特定選項之前，讓我們了解PHP形式構建器是什麼以及為什麼要使用一個。 PHP形式
使您的第一個自定義苗條過渡
Mar 15, 2025 am 11:08 AM
Svelte Transition API提供了一種使組件輸入或離開文檔（包括自定義Svelte Transitions）時動畫組件的方法。
