確保表格單元格連結跨越整個行高
以表格格式呈現資料時，通常需要在每個表格單元格中建立可點擊的連結。為了確保這些連結功能齊全，無論單元格的高度如何，請考慮實作以下技術：
在CSS 程式碼中，套用以下樣式：
<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>透過設定負邊距和匹配的填充，您可以有效地創建鏈接填充整個單元格高度的錯覺。負邊距將連結的內容推到可見區域之外，而填充則會添加垂直空間以匹配周圍的表格行。
此解決方案可確保即使一個單元格包含多行文字而其他單元格只有一行文字單行，所有單元格中的連結都可以單擊，無論其高度如何。使用者可以點擊單元格內的任意位置來觸發連結的操作。
使用更新的CSS 的HTML 代碼示例：
<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>結果是一個表格，用戶可以在其中單擊單元格中的任意位置來訪問請點擊相應的鏈接，即使在單元格高度不同的行中也是如此。
以上是如何確保表格單元格連結跨越整個行高？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
