Make link in table cell fill the entire row height

Question

I have a table of data and each cell is a link. I want to allow the user to click anywhere in the table cell and have them follow the link. Sometimes the table cells are m

Answer 1

Only problem here is that using display: block forces the browser to ignore the vertical align: center...

oops.

I jury rigged it to look right for one cell with height:60 and a font that occupied 20 pixels by adding a br... Then I realized that I had some items with 2-line text. Dang.

I ended up using the javascript. The javascript doesn't give the nice mousey pointy clicker thing, but the line of text does, so it will actually trigger a visual response, just not where I want it to... Then the Javascript will catch all the clicks that 'miss' the actual href.

Maybe not the most elegant solution, but it works well enough for now.

Now if I could only figure out how to do this the right way....

Any ideas on how to add the mouse icon change to a hand for the area covered by the onclick? Right now, the click to page works, but the icon only changes when it hits the href which only affects the text.

Answer 2

Little late to the party, but there's a nice solution I just discovered.

You can use a combination of relative and absolute positioned elements, along with a pseudo element to get the effect you're looking for. No extra markup needed!

Change the table cell (<td>), to be position: relative;, and create a ::before or ::after pseudo element on the <a> tag, and set it to position: absolute;, and also use top: 0; left: 0; right: 0; bottom: 0;.

Because the pseudo element is attached to the anchor tag, and you're telling it to take up the entire table cell, it will force the anchor tag to be at least that size, whilst not affecting the actual content of the anchor tag itself (thereby retaining its vertically centered alignment).

For example

table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  position: relative;
  width: 200px;
  padding: 0.5em 1em;
  border: 2px solid red;
  
  background-color: lime;
}

td a {
  /* FONT STYLES HERE */
  text-decoration: none;
}

td a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 4</a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 5</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 6<br>
        second line</a>
      </td>
    </tr>
  </tbody>
</table>

Hope this helps!

Answer 3

Try display: block:

td a {display: block; height:100%;}

[EDIT] WTF ... I can confirm this doesn't work in FF 4 and Chrome. This works:

td a {display: block;  height: 2.5em; border: 1px solid red;}

That suggests that height:100%; isn't defined in a table cell. Maybe this is because the cell gets its size from the content (so the content can't say "tell me your size" because that would lead to a loop). It doesn't even work if you set a height for the cells like so:

td {width: 200px; height: 3em; padding: 0px}

Again the code above will fail. So my suggestion is to use a defined height for the links (you can omit the width; that is 100% by default for block elements).

[EDIT2] I've clicked through a hundred examples at http://www.cssplay.co.uk/menus/ but none of them mix single line and multi-line cells. Seems like you hit a blind spot.

Answer 4

I will post the same answer here, as I did on my own question.

Inspired by Jannis M's answer, I did the following:

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append(' ');  
    });       
});

I added a   since empty links (not containing text nodes) can not be styled(?).

See my updated fiddle.

Answer 5

For me the only solution is to replace <table> <tr> with <div>s and style them using display:table and display:table-row accordingly.

Then you can replace <td> with just <a> and style it with display:table-cell.

Work perfectly even on varying heights of <td> contents.

so original html without anchors:

<table>
  <tr>
    <td>content1<br>another_line</td>
    <td>content2</td>
  </tr>
</table>

now becomes:

a:hover
{
  background-color:#ccc;
}

    <div style="display:table; width:100%">
      <div  style="display:table-row">
        <a href="#" style="display:table-cell; border:solid 1px #f00">content1<br>another_line</a>
        <a href="#" style="display:table-cell; border:solid 1px #f00">content2</a>
      </div>
    </div>

Answer 6

Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/RXHuE/213/