Expand size of anchor element to the size of the parent table cell

Question

I basically have the following:

<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="..."></a>
      </td>
    </tr>
  </tbody>
</table>

Assume that the table cell has some width and height to it, as created by additional table cell and table header elements.

I need that anchor element to expand to the same width and height of the table cell so that you can click anywhere within the cell to get to the link. How does one do this so that it's cross-browser compatible?

Clarification Setting the table cell to have a fixed width or height is not a valid option.

Answer 1

set the style of the anchor to:

 style="display: block; height: 100%; width:100%;"

Answer 2

Inside the link place an empty span. You can either give it a class and add css or give it an inline style.

I prefer to add a class like this:

<table>
<thead>
<tr>
  <th>Header</th>
</tr>
</thead>
<tbody>
<tr>
  <td>
      <a id="anchor" href="#"><span class="linkfill"></span>Link</a>
  </td>
 </tr>
</tbody>

<style>
.linkfill {
position: absolute;
width: 100%;
height: 100%;
}
</style>

This will flex with your table. working fiddle: http://jsfiddle.net/zGWTk/6/

Answer 3

Following hack works [Tested on Chrome / Firefox / Safari] Have the same padding for td and anchor elements. And for anchor also have margin which is equal to -ve of padding value.

HTML

<table>
    <tr>
        <td><a>Hello</a></td>
    </tr>
</table>

CSS:

td {                          
    background-color: yellow;                                                                              
    padding: 10px;                                                                                                            
}  
a {
    cursor:pointer;
    display:block;
    padding: 10px;
    margin: -10px;
}

Working Fiddle :http://jsfiddle.net/JasYz/