如何将整个表格单元格转换为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）？

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>

Answer 2

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

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/

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>