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

Question

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

为什么我把它放在表格中是因为每个文本 block 都需要是 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 图像 slider )，顶部有文本。

Answer 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>