如何在 HTML 中的表格后面保留可点击的链接？答案

【问题标题】：how to keep a clickable link behind a table in HTML?如何在 HTML 中的表格后面保留可点击的链接？
【发布时间】：2013-02-14 21:10:05
【问题描述】：

我想知道是否有可能在 css 表后面有可点击的链接。当图像为 40px 时，无法选择其后面的链接。

为什么我把它放在一个表格中是因为每个文本块都需要是 248px (744/3)

CSS

#tabel{
    position:absolute;
}
table, td, th
{
width:744px;
height:40px;
text-align:center;
}
th
{
background-color:transparent;
color:white;
}

HTML：

<div id="tabel">    
    <table cellspacing="0" cellpadding="0">
    <tr>
        <th>TXT 1</th>
        <th>TXT 2</th>
        <th>TXT 3</th>
    </tr>
    </table>
</div>

我的目标是有 3 个可点击的按钮（用于带有导航的 jquery 图像滑块），上面有文本。

【问题讨论】：

为什么不显示：没有按钮，直到显示它们？
你为什么不在th上设置你的事件处理程序？
因为删除了文本？我想被看见..
对不起，是第一个。我是菜鸟...但我不知道事件处理程序是什么？
你不需要使用表格来让你的元素是 248px 宽。除非是表格数据，否则不应在表格中。

标签： html css hyperlink background-image html-table

【解决方案1】：

您可能希望采用这样的无表方法：http://jsfiddle.net/t4tBt/

CSS

a.mybutton {
    display:block;
    width:248px;
    height:30px;
    float:left;
    text-align:center;
    vertical-align:middle;
    color:#999;
    text-decoration:none;
    padding-top:10px;
}
a.first{
   background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
a.second {
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
a.last {
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}

HTML

<div id="tabel">
<a href="http://www.google.com" class="mybutton first">First Button</a>
<a href="http://www.google.com" class="mybutton second">Second Button</a>
<a href="http://www.google.com" class="mybutton last">Third Button</a>
</div>

【讨论】：

已修复，谢谢！虽然我仍然无法单击 jquery 中的底层图像。