如何使表格单元格链接在整个行高上都可单击？

使用单元格链接垂直填充表格行

在 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中文网其他相关文章！