Is it possible to wrap entire table rows in <a>
tags? I want the the entire row to be a clickable link.
If I try the following, the links get rendered above and outside the table:
This:
<table>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
<a href="value_url"><tr><td>value</td><td>value</td></tr></a>
</table>
Renders like this:
<a href="value_url"></a>
<a href="value_url"></a>
<table>
<tr><td>value</td><td>value</td></tr>
<tr><td>value</td><td>value</td></tr>
</table>
You should not be doing that... is not a valid HTMl markup... Rows can not be wraped by divs.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
Edit 2021:
It seems nowadays there's better options that are more semantic and more screen-reader-friendly. Check out e.g. Jans solution.
Original answer:
as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:
HTML:
<div class="table"> <a class="table-row" href="/mylink"> <div class="table-cell">...</div> <div class="table-cell">...</div> <div class="table-cell">...</div> </a> </div>
CSS:
.table { display:table; } .table-row { display:table-row; } .table-cell { display:table-cell; }
It renders like that because the browser is respecting the W3C specification and only allowing <tr>
tags as direct descendents of <table>
.
As a solution, you could either put an <a>
tag inside each <td>
that points to the same URL:
<table>
<tr>
<td>
<a href="http://url/stuff">
First column
</a>
</td>
<td>
<a href="http://url/stuff">
Second column
</a>
</td>
</tr>
</table>
Or you could bind an onClick
handler to the <tr>
with JavaScript. A jQuery example would be this:
$('table tr').click(function() {
window.location = 'http://location/here';
});
Or, even better, use delegated events (jQuery 1.7+):
$('table').on('click', 'tr', function() {
window.location = 'http://location/here';
});
Another simple, CSS only solution is turning <a>
into block elements
<tr>
<td><a href="#">name 1</a></td><td><a href="#">link 1</a></td>
</tr>
<tr>
<td><a href="#">name 2</a></td><td><a href="#">link 2</a></td>
</tr>
The CSS would be:
td > a {
display: block;
}
Then the <a>
would take up the entire <td>
, and making entire row clickable without JS if the link is repeated for each cell in a row.
https://jsfiddle.net/evwa451n/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With