Skip to content

How to make whole table row clickable?

I have searched this site for a better solution on this but it seems that I can’t find the right one.

I want to make my whole table row clickable in case of PC and also same thing should happen when user touches anywhere inside the row in case of tablet. So far I have the following code and I would prefer a Html or JavaScript solution or anything along those lines.

<tr onclick="window.document.location='';">
  <td><img src="/chemsolver/images/help.jpeg" alt="" width="36" height="36"    id="Synthesis2" style="background-color: #996633" align="right" /></td>
  <td><a href="/chemsolver/help.php"> Help With Table </a></td>
</tr>

Answer

Set display: block on the anchor tag. And then set your height on the anchor.

http://jsfiddle.net/u2qLC/

Alternatively use an onclick event on the tr and have cursor: pointer set on the tr. Instead of using anchor tag.