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.

Solution 1

set the style of the anchor to:

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

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

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

Comments

[Lester Peabody]

This will only work if the width and height is set on the table cell element. It is not, and will change size dynamically depending on the content generated.

[Lester Peabody]

@paislee setting either height or width to a fixed value is not a valid option on the table cell... i will clarify this in the question

[calebds]

@LesterPeabody that was just to demonstrate that the anchor is expanding to the full height of the TD ~ whatever that happens to be..

[Lester Peabody]

@paislee that's not really true, it only expands because you've actually set the height on the cell... if you don't set the height of the cell, and that cell takes on a particular height based on the tallest cell in the row, the anchor will in fact not expand to the height of the cell.

[Lester Peabody]

@paislee this is perhaps a better starting point jsfiddle.net/zGWTk/2 ... i forget how awesome jsFiddle is

[Yaron U.]

I'm not sure if this can be done using css only, if your are ok with using jQuery as well you can use something like the following: jsfiddle.net/zGWTk/3

[calebds]

@YaronUliel Great suggestion. Maybe add that to your answer?

[Jukka K. Korpela]

Looks like there is no flexible answer, see the answers to stackoverflow.com/questions/3966027/…

[Nicole McCoy]

*I just updated my fiddle link. Sorry had the wrong one at first. jsfiddle.net/zGWTk/6

[Jorge]

Here is the answer. It actually works by sizing the <td> by padding the <a> and setting <a> display as block --- a { display:block; padding: 20px; } ---