Alternative to nested anchor tags

Question

I\'m trying to build a table where each cell\'s content is wrapped with an A tag set to full height and width, so that the entire cell is clickable.

But

Answer 1

You probably want something like...

<td>
   <a href="#" class="cell" >
      Officers include:
      President, Vice president, Secretary, Treasurer,
   </a>
   <a href="#">7 others</a>
</td>

Answer 2

You could use CSS or JavaScript. I would recommend just using CSS.

CSS

This works in my Firefox using CSS only. Basically I just made all child links (except the big one) have position: relative and set their z-index to higher than the large background link.

HTML

<div>
    Hello, <a href="http://example.com/hello" class="normal">Bob</a>
    <a href="http://example.com" class="big"></a>
</div>

CSS

div {
    position: relative;
}

.big {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;   
  z-index: 0;
}

.normal {
  position: relative;
  z-index: 1;  
}

JavaScript

Attach a click event to the cell, and an event to all child links. Make sure child links events do not bubble up (stopPropagation()).

Answer 3

Why not just define it like so:

<td>
    <a href="#" class="cell" >
       Officers include:
       President, Vice president, Secretary, Treasurer,
    </a>
    <a href="#">7 others</a>
</td>

Surely if the entire cell is clickable that will negate any of the cell's contained links?