Make Link in Table Cell Fill the Entire Row Height

td{  border:1px solid;  position:relative;}td a{  position:absolute;  top:0;  bottom:0;  right:0;  left:0;}

<table>  <tr>    <td>      <a href="https://google.com"></a>      My Link    </td>    <td>      <img src="https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />    </td>  </tr></table>

Make a DIV fill an entire table cell

The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

You said in your original question that setting width and height to 100% didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?

Edit

How foolish I am! The div was sizing to the text, not to the td. You can fix this on Chrome by making the div display:inline-block, but it doesn't work on IE. That's proving trickier...

What would cause a link to not fill the entire height of a table cell when height=100%?

The answer has been posted a couple of times under different names.

How can I get a div to fill a table cell vertically?

Make a DIV fill an entire table cell

NOTE: These solutions assume the table has an explicit height.

In Chrome, position: relative is your friend. It'll force the <a> to take up the entire table cell's height and width. Sadly this isn't enough to make it work in FF and IE. Check the demo.

To make it work in Chrome + FF, you can use display: table instead of display: block. Check it out.

While IE8 and IE9 both support display: table, they don't like its usage in this solution unless you give <td> a height of 100%, as seen in this third demo. If you resize your browser window or the width of the table, you'll notice that the link doesn't reach the full height of the cell. That's because the link is going off 100% (<a>) of 100% (<td>) of 300px (<table>), so the link will be at most 300px tall. It's a compromise, and one I'm not sure you'll be able to work around.

How to strech a link over the whole cell?

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/53Ptm/43/

how to make a whole row in a table clickable as a link?

Author's note I:

Please look at other answers below, especially ones that do not use jquery.

Author's note II:

Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017)

Original Answer

You are using Bootstrap which means you are using jQuery :^), so one way to do it is:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQuery and how to write handlers;

Advantage of using a class over id is that you can apply the solution to multiple rows:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

and your code base doesn't change. The same handler would take care of all the rows.

Another option

You can use Bootstrap jQuery callbacks like this (in a document.ready callback):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

This has the advantage of not being reset upon table sorting (which happens with the other option).

Note

Since this was posted window.document.location is obsolete (or deprecated at the very least) use window.location instead.

Place link on whole table cell with CSS

Making your anchor tag become divTableCell that is the easiest way

div.divTable {
  border: 1px solid #000000;
  border-collapse: collapse;
}

.divTable.divTable .divTableCell,
.divTable.divTable {
  border: 1px solid #000000;
  padding: 3px 3px;
  font-size: large;
  vertical-align: middle;
}

.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
}

.divTableCell {
  display: table-cell;
}

.divTableBody {
  display: table-row-group;
}

<div class="divTable divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <a class="divTableCell" href="https://google.de">
        <div style="background-color: lightblue;">Google</div>
      </a>
      <div class="divTableCell">
        Dummy text line 1<br />Dummy text line 1<br />Dummy text line 3<br />Dummy text line 4<br />Dummy text line 5
      </div>
    </div>
  </div>
</div>

td:last-child {
  background-color: green;
}

td {
  position: relative;
}
td:last-child div {
  background-color: green;
  width:100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}