Can I make TR clickable without java script?

Question

I currently have a java script solution to make a whole row of a table available. I need to support non-java script people, so is this possible without a java script?

I can add an href tag to each cell, but this is like overkill, and it also allows the user to only click on the contents of the cell contents.

Any other alternatives for turning an entire table row into a hyperlink?

Answer 1

Without putting a link inside each cell, unfortunately, otherwise it is not valid markup.

You can still look as though the “line” can be clicked, although the links are displayed in blocks, so they occupy the entire cell.

eg. ( 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; } 

Answer 2

I understand that this is an old thread with a perfectly legitimate solution in Rich's answer. There is also a way to do this without javascript And without duplicating your link * number of columns AND saving your markup / CSS is acceptable. It took me a while to understand, so I thought that I would send it here for others who also fall into this thread, like me.

Put the link in the first column:

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

This is great markup, so your only real problem is getting this link to cover the width of your table. I did it this way using pretty standard CSS:

 table.search_results a {position:absolute;display:block;width:98%;} 

Change the width to whatever you want, and basically you are made and cleaned. So everything is relatively easy, however, if you, like me, have a flexible layout, as well as some standard style in your links plus some additions to your tables, you will need these rules (copied necessary from above and added for an additional fee).

 table.search_results td:first-child {padding:0;} table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;} table.search_results a:hover {background:none;} table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;} 

To explain: The first rule removes all indentation only on my first td. By default, the gasket on my td is .5em. The second rule adds the same additions to the link, otherwise you will find yourself in the inconsistent contents of the cells. It also fixes a few standard styles that I have on my a to ensure that all columns look the same. You can also do it the other way around (add link styles to your etc). With the last two rules, I get rid of the default hover effect on my links, and then put it in tr for any tables with the correct class.

This works in browsers, which I care about, but you should, of course, test those you care about :) I hope I can help save someone a few minutes with this post!

Answer 3

Different browsers may or may not allow you to wrap the entire TR with href, HOWEVER, even if the browser supports this, it is invalid (X) HTML, and the results will differ from browser to browser in very unreliable (updates can also change behavior).

It is best to either use JS or put href inside each cell.