Question

I currently have a java script solution to make an entire table row clickable. I need to support the non-java script folks so is this possible without java script?

I can add a a href tag to each cell but that seems like overkill and it also only lets the user click on the contents of the cell.

Any other alternatives to turn an entire table row into a hyperlink?

Answer 1

Not without putting a link inside each cell unfortunately, otherwise it’s not valid markup.

You can still make it appear like the “row” is clickable though by making the links display as blocks so they take up the entire cell.

e.g. (jsFiddle)

<table>
    <tr>
        <td><a href="#">Some text</a></td>
        <td><a href="#">more text</a></td>
        <td><a href="#">more text</a></td>
    </tr>
</table>

tr:hover { background: #ddd; }
td { border: 1px solid #000; border-collapse: collapse; }
td a { display: block; padding: 5px 20px; }