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

Here is a way by putting a transparent A element over the table rows. Advantages are:

• is a real link element: on hover changes pointer, shows target link in status bar, can be keyboard navigated, can be opened in new tab or window, the URL can be copied, etc
• the table looks the same as without the link added
• no changes in table code itself

Disadvantages:

• size of the A element must be set in a script, both on creation and after any changes to the size of the row it covers (otherwise it could be done with no JavaScript at all, which is still possible if the table size is also set in HTML or CSS)

The table stays as is:

        

            
Blah Blah
            
1234567
            
£158,000
        

Add the links (for each row) via jQuery JavaScript by inserting an A element into each first column and setting the needed properties:

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the  element
    var myA=$('');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

The width and height setting can be tricky, if many paddings and margins are used, but in general a few pixels off should not even matter.

Live demo here: http://jsfiddle.net/qo0dx0oo/ (works in Firefox, but not IE or Chrome, there the link is positioned wrong)

Fixed for Chrome and IE (still works in FF too): http://jsfiddle.net/qo0dx0oo/2/