How to turn a whole table cell into a link in HTML/CSS?

Question

I've read a lot of questions about this problem, but none of those could solve it perfectly: the cell won't be clickable at its full height.

As shown in the picture, I made a headline for my webpage using the <table> tag and colored the clickable content into blue, while the whole table is orange.

The HTML code is:

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

And the CSS code is:

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

Unfortunately, as you can see, not the whole cell is blue, therefore not the whole cell is clickable. Could anyone tell me a perfect solution for this (possibly without using JavaScript)?

Answer 1

Try display: flex and justify-content: center instead of 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>