Linking entire table rows

There is no easy way to link up a whole table row since you cannot wrap an <a> tag around a <tr> tag.

There are two approaches to solve this

1. use javascript to bind to the onclick event of the table row
2. put an anchor tag inside every table cell of the row

Both of these approaches have issues:

1. Using the first method will result in people who have javascript disabled not being able to follow that link. Moreover, If you link up a file, users will not be able to do things like right-click -> save as
2. Using the second method will result in a smaller click target since it is hard to make the anchor tags always expand to the full width and height of the table cells

That's why it makes sense to combine those two approaches.

Advantages

1. The entire row will always be clickable (and trigger a hover effect)
2. Users can use right-click -> save on almost the entire surface of the row
3. Users without javascript can still follow the link

HTML

<tr data-href="linkToFile.pdf">
  <td>
    <a href="linkToFile.pdf">Column one</a>
  </td>
  <td>
    <a href="linkToFile.pdf">Column two</a>
  </td>
<tr>

CSS

*[data-href] {
  cursor: pointer;
}
td a {
  display:inline-block;
  min-height:100%;
  width:100%;
  padding: 10px; /* add your padding here */
}
td {
  padding:0;  
}

We try to make the anchor tag use all available space. This does not work well for empty cells (a   can help a little) as well as in cases where some table cells have multiple lines. Hence the following javascript.

Javascript (using jquery)

$('*[data-href]').on("click",function(){
  window.location = $(this).data('href');
  return false;
});
$("td > a").on("click",function(e){
  e.stopPropagation();
});

The key here is to use stopPropagation to prevent the click event from bubbling up to the row