html - table row like a link

I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.

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

I made myself a custom jquery function:

Html

<tr data-href="site.com/whatever">

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

Easy and perfect for me. Hopefully it helps you.

(I know OP want CSS and HTML only, but consider jQuery)

Edit

Agreed with Matt Kantor using data attr. Edited answer above

If you're on a browser that supports it you can use CSS to transform the <a> into a table row:

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Of course, you're limited to not putting block elements inside the <a>. You also can't mix this in with a regular <table>

If you have to use a table, you can put a link into each table cell:

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

And make the links fill up the entire cells:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

If you are able to use <div>s instead of a table, your HTML can be a lot simpler, and you won't get "gaps" in the links, between the table cells:

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

Here is the CSS that goes with the <div> method:

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}

The usual way is to assign some JavaScript to the onClick attribute of the TR element.

If you can't use JavaScript, then you must use a trick:

1. Add the same link to each TD of the same row (the link must be the outermost element in the cell).

2. Turn links into block elements: a { display: block; width: 100%; height: 100%; }

The latter will force the link to fill the whole cell so clicking anywhere will invoke the link.

Answer from sirwilliam fits me best. I improved the Javascript with support for hotkey Ctrl + LeftClick (opens page in new tab). Event ctrlKey is used by PC's, metaKey by Mac.

Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
		if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
			window.open(url, '_blank');
			window.focus();
		}
		else if(click == 1){
			window.location.href = url;
		}
        return true;
    }
});

Example

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

You can't wrap a <td> element with an <a> tag, but you can accomplish similar functionality by using the onclick event to call a function. An example is found here, something like this function:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

And add it to your table like this:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

I know this question is already answered but I still don't like any solution on this page. For the people who use JQuery I made a final solution which enables you to give the table row almost the same behaviour as the <a> tag.

This is my solution:

jQuery You can add this for example to a standard included javascript file

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
	var url = $(this).attr('url');
	if(url){
		if(click == 1){
			window.location.href = url;
		}
		else if(click == 2){
			window.open(url, '_blank');
  			window.focus();
		}
	    return true;
	}
});

HTML Now you can use this on any <tr> element inside your HTML

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>

When i want simulate a <tr> with a link but respecting the html standards, I do this.

HTML:

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS:

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
	height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

In this way, when someone go with his mouse on a TR, all the row (and this links) gets the hover style and he can't see that there are multiple links.

Hope can help someone.

Fiddle HERE

This saves you having to duplicate the link in the tr - just fish it out of the first a.

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Something along these lines perhaps? Though it does use JS, but that's only way to make a row (tr) clickable.

Unless you have a single cell with an anchor tag that fills the entire cell.

And then, you shouldn't be using a table anyhow.

After reading this thread and some others I came up with the following solution in javascript:

function trs_makelinks(trs) {
	for (var i = 0; i < trs.length; ++i) {
		if (trs[i].getAttribute("href") != undefined) {
			var tr = trs[i];
			tr.onclick = function () { window.location.href = this.getAttribute("href"); };
			tr.onkeydown = function (e) {
				var e = e || window.event;
				if ((e.keyCode === 13) || (e.keyCode === 32)) {
					e.preventDefault ? e.preventDefault() : (e.returnValue = false);
					this.click();
				}
			};
			tr.role = "button";
			tr.tabIndex = 0;
			tr.style.cursor = "pointer";
		}
	}
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

To use it put the href in tr/td/th that you desire to be clickable like: <tr href="http://stackoverflow.com">. And make sure the script above is executed after the tr element is created (by its placement or using event handlers).

The downside is it won't totally make the TRs behave as links like with divs with display: table;, and they won't be keyboard-selectable or have status text. Edit: I made keyboard navigation work by setting onkeydown, role and tabIndex, you could remove that part if only mouse is needed. They won't show the URL in statusbar on hovering though.

You can style specifically the link TRs with "tr[href]" CSS selector.

I have another way. Especially if you need to post data using jQuery

$(document).on('click', '#tablename tbody tr', function()
{	
	var test="something";
	$.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){		
		window.location.href = "http://somepage";
	});
});

Set variable sets up variables in SESSIONS which the page you are going to can read and act upon.

I would really like a way of posting straight to a window location, but I do not think it is possible.

Thanks for this. You can change the hover icon by assigning a CSS class to the row like:

<tr class="pointer" onclick="document.location = 'links.html';">

and the CSS looks like:

<style>
    .pointer { cursor: pointer; }
</style>

This method is here to give you a choice. Old css trick: filling the parent with position absolute.

<table>
<tr style=position:relative>
<td><a href=# style=position:absolute;inset:0></a>some
<td>cells
<td>in
<td>a row
</table>

• inset:0 is a shorthand for top:0;right:0;bottom:0;left:0

• we put <a> inside first <td> because this is a good chance to keep validity: only <td> can be a child of <tr>. But you can place it anywhere in the table and it will work.

Can you add an A tag to the row?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

Is this what you're asking?