如何将整个表格单元格变成 HTML/CSS 中的链接？

Posted 2023-03-06

【中文标题】如何将整个表格单元格变成 HTML/CSS 中的链接？

【英文标题】：How to turn a whole table cell into a link in HTML/CSS?

【发布时间】：2018-01-27 10:40:03

【问题描述】：

我已经阅读了很多关于这个问题的问题，但没有一个可以完美地解决它：单元格在其全高时无法点击。

如图所示，我用<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）？

【问题讨论】：

我试过了，结果还是一样，高度低……

【参考方案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>

【讨论】：

完成！再次感谢您：D

这仅在每个单元格具有相同内容高度的情况下才有效，但如果是这种情况，那么您只需要使用显示块 jsfiddle.net/1nrbL1mu/7 为锚添加填充

【参考方案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/

【讨论】：

这行得通，如果你使用a:after（一个冒号），它将在IE8+中工作，而display: flex不行

由于 W3C 推荐，我使用 :: 表示伪元素，: 表示伪类。在 IE 11 上测试。

为什么要支持IE8？你不能用升级到IE11吗？使用旧浏览器很危险。

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

不正确。许多用户使用的是企业管理的 Windows，并且没有完全的管理员权限或控制来升级他们的浏览器。此外，Windows Vista 最多只支持 IE9。

【参考方案3】：

试着把它放到一列一行的新表中

<table align="center"  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"  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>