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

You can't do that. It is invalid HTML. You can't put a <a> in between a <tbody> and a <tr>. Try this instead:

<tr onclick="window.location='#';">
   ...
</tr>

add style for pointer view

[data-href] { cursor: pointer; }

When you work up to it, you'd want to use JavaScript to assign the click handler outside the HTML.

You could include an anchor inside every <td>, like so:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

You could then use 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; 
}

Example jsFiddle here.

This is probably about as optimum as you're going to get it unless you resort to JavaScript.

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.