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

Question

I\'m using Bootstrap and the following doesn\'t work:

    
        
            Blah Blah
           


        

Answer 1

There is a nice way to technically do it with tag inside , which might be semantically incorrect (might give you a browser warning), but will work with no JavaScript/jQuery required:

  
     Blah Blah
     1234567
     £158,000
     
  


/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS: Notice the trick here is to put tag as last element, otherwise it will try to take the space of the first cell.

PPS: Now your entire row will be clickable and you can use this link to open in new tab as well (Ctrl/CMD+click)