Make clickable link inside clickable box (ActionLink inside <a href>)

Question

I am trying to make a whole table row clickable and have done so using javascript. However, this does not let you see the target link in the status bar and also prevents you from opening these links in new tabs.

Therefore, I have been trying the following:

<tr>
  <td><a href="#">@Html.ActionLink(...)</a></td>
  <td><a href="#">@Html.ActionLink(...)</a></td>
  <td><a href="#">@Html.ActionLink(...)</a></td>
</tr>

Then using display:block; on the anchors to make the full row clickable.

tr:hover { 
   background: red; 
}

td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

However, I can no longer click the action link, wherever I click on the table row, it takes me to whatever I have in the anchor.

That leads me to my question. How can I make it so that if I click anywhere in the row, it takes me to my anchor, but if I click precisely on the action link, it takes me to where that is set.

Any help is greatly appreciated.

Answer 1

Someone has written a plugin for Bootstrap 3 that makes this easy to do. Jasny Bootstrap has "Row Links" which allow you do to the following:

<tbody data-link="row" class="rowlink">
<tr>
    <td><a href="#wholerow">First Link</a></td>
    <td>Some text</td><td class="rowlink-skip"><a href="#">Action</a></td>
</tr>
</tbody>

where the entire row will link to #wholerow and the <a> tag will link to #