Make link in table cell fill the entire row height

Asked 19/10, 2010 at 7:6 Answered 28/10, 2020 at 10:59

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 more than one line but not always. I use td a {display: block} to get the link to cover most of the cell. When there is one cell in a row that is two lines and the others are only one line the one liners don't fill the entire vertical space of the table row. Here is the sample HTML and you can see it in action here http://www.jsfiddle.net/RXHuE/:

<head>
<style type="text/css">
  td {width: 200px}
  td a {display: 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/">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>
  </tbody>
</table>
</body>

Redtop answered 19/10, 2010 at 7:6 Comment(3)

+1 That's the first time I've heard about "display: table". – Maje 19/10, 2010 at 7:13

Yeah, I tried using "display: inline-block", which actually worked in Webkit browsers but not firefox or IE. Then I read that "display: table" is similar so I thought I would give it a try and ended up posting the question with that. I have since edited the question to use "display: block" because that was my first idea. – Redtop 19/10, 2010 at 7:17

I nearly ask the same question: #9127774 – Monteverdi 6/2, 2012 at 10:57

You need a small change in your CSS. Making td height:100%; works for IE 8 and FF 3.6, but it doesn't work 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; which is 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%;
}

Update

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

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;
}

HTML

<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>
  </tbody>
</table>

The example lays here

Haulage answered 19/10, 2010 at 7:50 Comment(12)

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. – Redtop 19/10, 2010 at 8:0

@Brian: Does making height 100% is also not feasible for you? – Haulage 19/10, 2010 at 12:18

@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 :). – Redtop 19/10, 2010 at 15:1

@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. – Haulage 20/10, 2010 at 0:46

Thanks Gaurav, I was dealing with this issue again recently and revisited your answer. It is working for me on IE9, FF9 and Chrome. – Redtop 23/12, 2011 at 4:50

I know I'm late to the party, but Gaurav's solution is incorrect. This solution is assuming you will wrap the content of the cell using a <br> tag, and that's just not the case in scalable circumstances because we never know where the text is going to wrap. Here's a DEMO of the exact same code Gaurav provided but without the <br> inside the text: it doesn't make the anchor links expand the entire height of the <td>. For what I've read all over the web, this is not doable today; right now Tim Büthe's solution below with JS seems to be the best solution – Endolymph 4/4, 2013 at 17:37

Hate to say it but zobier's answer below is THE answer to this issue. No need for JavaScript at all. – Endolymph 4/4, 2013 at 18:1

Unfortunately, the example linked only works in quirks mode. Put <!DOCTYPE html> at the top of the document and it breaks. – Idaidae 22/8, 2013 at 13:40

Does not work in Firefox 24 and standards mode. Need to search for something else. – Wondrous 21/10, 2013 at 18:40

@Ricardo I never put a <br>. It is in the question. – Haulage 30/10, 2013 at 6:22

td{ position: relative } and td a{position: absolute; display:block; width: 100%; height: 100% } for very hight cell – Dotson 25/12, 2013 at 18:52

what if i dont set td height? – Li 29/6, 2016 at 11:1

111

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/

Loris answered 4/4, 2013 at 1:31 Comment(7)

I like this one. I'm not using no JS. – Lyricism 21/11, 2013 at 23:27

Works great in current Firefox (27), Chrome (33) and IE (11). – Fullmouthed 11/3, 2014 at 11:14

Best solution. Also allows you to still vertically center the text, which other solutions seem to have problems with. The ONLY problem is that on Chrome for Android (and maybe other browsers too) when you tap a link the whole big link gets higlighted, including the parts outside the <a>. Fixable with -webkit-tap-highlight-color: rgba(0, 0, 0, 0); – Lowborn 31/7, 2014 at 18:0

This is clever, but unfortunately breaks if you're using table cells for a responsive navigation, and you need dropdown menus from that navigation. – Madelynmademoiselle 23/9, 2014 at 2:1

Outstanding. Allows the browser's rendering engine to continue sizing table cells to fit the space occupied by the table, which is crucial for something like generating calendars, which may have a variable number of rows depending on the month. This neatly solves a sticky formatting problem. My hat's off to you, zobier. – Gratulation 3/11, 2014 at 22:23

display: block;margin: -10em;padding: 10em;height:100%;width:100%; Did the trick for me for IE 7. Thanks :) – Insured 28/12, 2015 at 14:14

When you move the mouse above a cell on the top-row doesn't this mean the link can be clicked even by clicking above the cell? Why exactly is 10em the magic number? Why not 1em or 100em? – Trapan 29/11, 2022 at 19:2