ansaurus

Question

Make link in table cell fill the entire row height

Answer 1

A:

You can use a little javascript.

  <td onclick="window.location='http://www.google.com/'"&gt;
    <a href="http://www.google.com/"&gt;Cell 3</a>
  </td>

Or, you can create an element which completely fills the cell (div, span, whatever) and wrap the around your big invisible element.

  <td>
    <a href="http://www.google.com/"&gt;
      <div style="width:100%; height:100%;">Cell 1<br>
      second line
      </div>
    </a>
  </td>

Sam Dufel 2010-10-19 07:10:25

I'm tempted to vote this down. Just because you *can* do something doesn't mean it's *good* to do it :-)

Aaron Digulla 2010-10-19 07:11:46

Just because you can vote this down, doesn't mean it's good to :) While using javascript links can interfere with SEO, there's already a nice html link there; also, with a browser which doesn't support javascript, there will be a very minimal loss of functionality.

Sam Dufel 2010-10-19 07:18:34

Your second suggestion isn't better: HTML doesn't allow to nest block elements inside of inline elements. The browser will try to make sense of it but in this case, the div will get the size from the link (which doesn't fill the cell).

Aaron Digulla 2010-10-19 07:21:05

@Sam: `display: block` is the correct, simple, cross-browser, valid solution.

Aaron Digulla 2010-10-19 07:23:17

I'm trying to stay away from javascript because I've been having issues with right and middle clicking when using it. Also your second solution doesn't appear to work. Thanks.

Brian Fisher 2010-10-19 07:23:52

Answer 2

+1 A:

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.

Aaron Digulla 2010-10-19 07:10:58

Thanks for the suggestion. That is actually what I tried first and I changed the code in my post to use that. That allows the link to take up the entire horizontal space of the table cell, but not the vertical.

Brian Fisher 2010-10-19 07:14:56

@Brian Fisher: Then something else is wrong. Add a border around the table cells and the links to see how big they really are. If the link is the only element in the cell and the cell has no padding, etc. `height: 100%;` should do the trick.

Aaron Digulla 2010-10-19 07:17:52

@Brian: Or to put it another way: The cell should get the height from the link in the code above, so you can never have any space outside of the link.

Aaron Digulla 2010-10-19 07:24:18

So I put a border around the cell, and it looks like the cell is not filling the entire height of the row. I tried putting height: 100% on the td but that didn't work. Any other thoughts?

Brian Fisher 2010-10-19 07:32:23

It works for me if I fix the height of the td and just set the height of the td a to 100% in IE 8, FF3.6 and Chrome. I don't really want to fix the height of the td's because sometimes the rows will be 1, 2 or 3 lines depending on the content. WTF is awesome, I would give you plus 2 if I could.

Brian Fisher 2010-10-19 08:11:49

Post the question on http://doctype.com/ Maybe someone there knows a trick to make it work without nailing the height down. Otherwise, you'll need JavaScript *shudder*

Aaron Digulla 2010-10-19 08:16:19

Answer 3

+2 A:

Needs a small change in your css. Making td height 100% works for IE 8 and FF 3.6 but not for chrome.

 td {width: 200px; border: solid 1px green; height: 100%}
 td a {display: block; height:100%; width:100%;}

But making height to 50px works for chrome in addition to IE and FF

td {width: 200px; border: solid 1px green; height: 50px}
td a {display: block; height:100%; width:100%;}

Edit:

You have given the solution yourself in another post here i.e. to use display: inline-block. This works when combined with my solution for Chrome, FF3.6, IE8

td {width: 200px; border: solid 1px green; height: 100%}
td a {display: inline-block; height:100%; width:100%;}

Edit2

The following code is working for me in IE8, FF3.6 and chrome.

<head>
<style type="text/css">
  td {width: 200px; border: solid 1px green; height: 100%}
td a {display: inline-block; height:100%; width:100%;}
  td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/"&gt;Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/"&gt;Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/"&gt;Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/"&gt;Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>
</body>

I have hosted this code here - http://jsbin.com/oqaka3

Could not get jsfiddle to work because it was inserting some of its own css.

Gaurav Saxena 2010-10-19 07:50:55

Good suggestion, however, I don't want to fix the height of the cells. I'm basically displaying a table of data to the user and sometimes a row has a cell with lots of data causing it to wrap but sometimes there are no such cells in a row.

Brian Fisher 2010-10-19 08:00:35

@Gaurav: inline-block doesn't work in FF4

Aaron Digulla 2010-10-19 08:58:23

@Brian: Does making height 100% is also not feasible for you?

Gaurav Saxena 2010-10-19 12:18:16

@Gaurav: I can make the the td's and links 100% height, I just don't want to give them a set height (otherwise they will sometimes be taller than they need to be). Also that would be hilarious if I had given the answer somewhere else :).

Brian Fisher 2010-10-19 15:01:20

Your edit only works for me in Chrome.

Brian Fisher 2010-10-19 15:03:20

@Brian: Really? Is it working for crome alone? I checked for IE8, FF 3.6 and Chrome. Anyway, I have pasted the html which is working for me in edit2.

Gaurav Saxena 2010-10-20 00:46:37

ansaurus

tags:

views:

answers:

Make link in table cell fill the entire row height

related questions