如何在HTML/CSS中将整个表格单元格转换为链接？

Question

我看到了很多关于这个问题的提问，但是没有一个可以完美地解决它：单元格的完整高度无法点击。

如图所示，我使用<table>标签制作了网页的标题，并将可点击内容设置为蓝色，而整个表格为橙色。

HTML代码如下：

<table class="visible" id="menu" align="center">
  <tr>
  <td><a href="#"><p>Home</p></a></td>
  ...
  </tr>
</table>

而 CSS 代码如下：

#menu a {
  display: block;
  text-decoration: none;
}

很遗憾，正如您所看到的，不是整个单元格都是蓝色的，因此并非整个单元格都可点击。有没有人能告诉我一个完美的解决方案（最好不用JavaScript）？

- Simplemathic

---

我尝试了，但结果仍然一样，高度很低... - Simplemathic

Answer 1

尝试使用display: flex和justify-content: center代替display: block。

a {
  background: lightblue;
  display: flex;
  justify-content: center;
  text-decoration: none;
}

<table align="center" border="1">
  <tr>
  <td><a href="#"><p>Home</p></a></td>
  </tr>
</table>

- Jon Uleis

---

完成！再次感谢您:D - Simplemathic

只有当每个单元格具有相同的内容高度时，此方法才有效，但如果是这种情况，则只需向具有显示块的锚点添加填充即可。https://jsfiddle.net/1nrbL1mu/7/ - Huangism

Answer 2

不要在 <a/> （内联级别）中使用 <p/> （块级别）。

a::after {
   display:block;
   content:" "; 
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:yellow;
   z-index:-1;
}
td
{
   position:relative; 
   z-index:0;
}

删除"a"的样式。

https://jsfiddle.net/1nrbL1mu/9/

在IE中同样有效。

a::after 
{
   display:block;
   content:" "; 
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:300px; /* max possible */
   background:yellow;
   z-index:-1;
}
td
{
   position:relative; 
   z-index:0;
   overflow:hidden;
}

https://jsfiddle.net/1nrbL1mu/12/

- 18C

---

这个可以正常工作，如果你使用 a:after（一个冒号），它将在 IE8+ 中工作，而 display: flex 则不会。 - Zac

为什么你想要支持IE8？难道你不能升级到IE11吗？使用旧版浏览器是有风险的。 - 18C

不幸的是，仍有一些人在使用IE8、9和10，而一些开发人员需要支持它，因此我只是指出您的解决方案可以支持更多的浏览器。较新的浏览器支持伪元素的:，因此使用它意味着它是向后兼容的。 - Zac

不是这样的。很多用户使用的是由企业管理的Windows系统，他们没有完全的管理员权限或者控制权来升级浏览器。而且Windows Vista只支持IE9及以下版本。 - Zac

让我们在聊天中继续这个讨论。 - Zac

Answer 3

尝试将其放置在一个列和一行的新表中

<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td> <a href="#" title="Conoce más" style="text-decoration: none; color: #010000;" target="_blank">
    
    <table align="center" width="175" border="0" cellspacing="0" cellpadding="0">  
<tr>    
 <td style="border: 1px solid #f3b946; text-align: center; padding: 10px 35px 10px 35px; font-size: 18px;">CONOCE&nbsp;MÁS
    </td>  
</tr>
</table>
    </a>
    
    </td>
  </tr>
</table>

- Matías Carabajal