how to make a whole row in a table clickable as a link?
Author's note I:
Please look at other answers below, especially ones that do not use jquery.
Author's note II:
Preserved for posterity but surely the wrong approach in 2020. (Was non idiomatic even back in 2017)
Original Answer
You are using Bootstrap which means you are using jQuery :^), so one way to do it is:
<tbody>
<tr class='clickable-row' data-href='url://'>
<td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
</tr>
</tbody>
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
window.location = $(this).data("href");
});
});
Of course you don't have to use href or switch locations, you can do whatever you like in the click handler function. Read up on jQuery
and how to write handlers;
Advantage of using a class over id is that you can apply the solution to multiple rows:
<tbody>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
</tr>
<tr class='clickable-row' data-href='url://some-other-link/'>
<td>More money</td> <td>1234567</td> <td>£800,000</td>
</tr>
</tbody>
and your code base doesn't change. The same handler would take care of all the rows.
Another option
You can use Bootstrap jQuery callbacks like this (in a document.ready
callback):
$("#container").on('click-row.bs.table', function (e, row, $element) {
window.location = $element.data('href');
});
This has the advantage of not being reset upon table sorting (which happens with the other option).
Note
Since this was posted window.document.location
is obsolete (or deprecated at the very least) use window.location
instead.
html - table row like a link
You have two ways to do this:
Using javascript:
<tr onclick="document.location = 'links.html';">
Using anchors:
<tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>
I made the second work using:
table tr td a {
display:block;
height:100%;
width:100%;
}
To get rid of the dead space between columns:
table tr td {
padding-left: 0;
padding-right: 0;
}
Here is a simple demo of the second example: DEMO
How to make <tr> clickable as a link instead of cell?
Try this (without JS):
<tr> <td style="text-decoration: underline; font-size: 15px;"></td> <td> <a href="http://google.com"> <div style="height:100%;width:100%"> 1<?php echo $row['district']; ?> </div> </a> </td> <td> <a href="http://google.com"> <div style="height:100%;width:100%"> 2<?php echo $row['program']; ?></td> </div> </a> <td> <a href="http://google.com"> <div style="height:100%;width:100%"> 3<?php echo $row['gender']; ?> </div> </a> </td> <td> <a href="http://google.com"> <div style="height:100%;width:100%"> 4<?php echo $row['yoa']; ?> </div> </a> </td> <td> <a href="http://google.com"> <div style="height:100%;width:100%"> 5<?php echo $row['email']; ?> </div> </a> </td>
How can I make a link from a <td> table cell
Yes, that's possible, albeit not literally the <td>
, but what's in it. The simple trick is, to make sure that the content extends to the borders of the cell (it won't include the borders itself though).
As already explained, this isn't semantically correct. An a
element is an inline element and should not be used as block-level element. However, here's an example (but JavaScript plus a td:hover CSS style will be much neater) that works in most browsers:
<td>
<a href="http://example.com">
<div style="height:100%;width:100%">
hello world
</div>
</a>
</td>
PS: it's actually neater to change a
in a block-level element using CSS as explained in another solution in this thread. it won't work well in IE6 though, but that's no news ;)
Alternative (non-advised) solution
If your world is only Internet Explorer (rare, nowadays), you can violate the HTML standard and write this, it will work as expected, but will be highly frowned upon and be considered ill-advised (you haven't heard this from me). Any other browser than IE will not render the link, but will show the table correctly.
<table>
<tr>
<a href="http://example.com"><td width="200">hello world</td></a>
</tr>
</table>
HTML table row link
I just use css:
<style>
table.collection {width:500px;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:0px;}
table.collection td a {text-decoration:none; display:block; padding:0px; height:100%;}
</style>
<table class="collection">
<tr>
<td><a href="#">Linky1</a></td>
<td><a href="#">Data1</a></td>
</tr>
<tr>
<td><a href="#">Linky2</a></td>
<td><a href="#">Data2</a></td>
</tr>
</table>
Link entire table row?
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 */
}
How to make entire <tr> in a table clickable like <a href=>
Try putting display as block.
td a {
display: block;
}
Fiddle
Also have a look at answer in this question too.
Wrapping HTML table rows in <a> tags
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; }
how do I give a link name to an html table row?
You do one of two things:
1) Set the id attribute of the <tr>
. <tr id="row2">...</tr>
OR
2) put the <a>
element inside the <td>
element. If you put any element inside a <table>
but not inside a <th>
or <td>
, it'll get rendered before the entire table (try it with any element, the browser does its best to correct the invalid HTML)
Related Topics
Flexbox Layout with Two Equal Height Children, One Containing Nested Flexbox with Scrolling Content
Encoding Ffmpeg to Mpeg-Dash - or Webm with Keyframe Clusters - for Mediasource API
Rendering a Hierarchy of "Option"S in a "Select" Tag
Can't Get The Complete Address While Uploading a File
How to Use an Image from My Local File System as Background in HTML
How to Center The <Legend> Element - What to Use Instead of Align:Center Attribute
Apply Custom Font to Attributed String Which Converts from HTML String
Prevent Floated Divs from Wrapping to New Line
How to Change One Word Color of Placeholder
Always Show Vertical Scrollbar in <Select>
Put Fixed Text on an Input Text Box
Send Custom Http Request Header with HTML5 Audio Tag
Stylesheet Taken-Over/Replaced by Chinese Characters
Height Is Not Correct in Flexbox Items in Chrome
What's The Point of The <Option> "Label" Attribute Inside <Select>
<A Href> Appends Link to End of Current Url
How to Position a Table at The Center of Div Horizontally & Vertically