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)?
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>