CODEWITHSUNDEEP
htmlcsshyperlinkhtml-tablecell
Simplemathic
Simplemathic

Reputation: 111

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

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.

Illustration here

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

Upvotes: 4

Views: 5560

Answers (3)

Mat&#237;as Carabajal
Mat&#237;as Carabajal

Reputation: 1

Try puting it o new table of one column and one row 

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

Upvotes: 0

18C
18C

Reputation: 2110

Do not use <p/> (block-level) inside <a/> (inline-level).

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;
}

delete styles for "a".

https://jsfiddle.net/1nrbL1mu/9/

This also works for 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/

Upvotes: 2

Jon Uleis
Jon Uleis

Reputation: 18639

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>

Upvotes: 5

Related Questions