Link entire table row? [duplicate]

Question

I know it is possible to link an entire table cell with CSS.

.tableClass td a{    display: block; } 

Is there a way to apply a link to an entire table row?

Answer 1

I agree with Matti. Would be easy to do with some simple javascript. A quick jquery example would be something like this:

<tr>   <td><a href="http://www.example.com/">example</a></td>   <td>another cell</td>   <td>one more</td> </tr> 

and

$('tr').click( function() {     window.location = $(this).find('a').attr('href'); }).hover( function() {     $(this).toggleClass('hover'); }); 

then in your CSS

tr.hover {    cursor: pointer;    /* whatever other hover styles you want */ } 

Answer 2

Use the ::before pseudo element. This way only you don't have to deal with Javascript or creating links for each cell. Using the following table structure

<table>   <tr>     <td><a href="http://domain.tld" class="rowlink">Cell</a></td>     <td>Cell</td>     <td>Cell</td>   </tr> </table> 

all we have to do is create a block element spanning the entire width of the table using ::before on the desired link (.rowlink) in this case.

table {   position: relative; }  .rowlink::before {   content: "";   display: block;   position: absolute;   left: 0;   width: 100%;   height: 1.5em; /* don't forget to set the height! */ } 

demo

The ::before is highlighted in red in the demo so you can see what it's doing.