html - 如何将整个表格单元格变成 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>