首页 > web前端 > css教程 > 如何使表格单元格链接在整个行高上都可单击?

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

Mary-Kate Olsen
发布: 2024-11-03 13:12:03
原创
639 人浏览过

How to Make Table Cell Links Clickable Across the Entire Row Height?

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

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板