Linking an entire table row

HTML & CSS
1

Hi,

I need to link an entire table row to another page, and originally I had put the A HREF tag around the TR, but of course that’s awful practise, didn’t validate and doesn’t work with any sort of table sorting script.

So! I’m just wondering what the best way is of linking an entire row? Preferably without using Javascript and pure CSS.

At the moment I’m using this:

table td { padding-top: 0px; padding-bottom: 0px }
table a { display: block; padding: 6px 0; width: 100% }
table a:hover { background-color: #d8f7d9 }

And then linking each individual item in the table accordingly, but I can’t help thinking there’s a better way, and also this isn’t ideal since the a:hover only works on the TD, and not the actual TR.

Thanks

2

Mmmm. Well here is a little example of just a TD I made:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body {
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-size:0.9em;
background:#eee;
}

td a {
display:block;
}

td a:hover {
background:#ccc;
}
-->
</style>
</head>
<body>
	<table width="400" cellpadding="0" cellspacing="0">
  	<tr>
    	<td><a href="#" title="Link">Link</a></td>
      <td>1</td>
    </tr>
    <tr>
    	<td><a href="#" title="Link">Link</a></td>
      <td>2</td>
    </tr>
    <tr>
    	<td><a href="#" title="Link">Link</a></td>
      <td>3</td>
    </tr>
    <tr>
    	<td><a href="#" title="Link">Link</a></td>
      <td>4</td>
    </tr>
    <tr>
    	<td><a href="#" title="Link">Link</a></td>
      <td>5</td>
    </tr>
  </table>
</body>
</html>

However, it looks like you have to use a small amount of JavaScript to make the whole row work.

See how to do this here.

3

Ah excellent, cheers - I guess a small splash of Javascript won’t hurt too much :slight_smile:

4

I made a try with abs. pos. making the link in first cell cover the whole row. It seems to work in all browsers:

<!DOCTYPE HTML PUBtrC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#container {
	float: left;
	position: relative; /* div as FF don't apply the relative coordinates on the table */
	margin: 100px;
}
table {
	table-layout: auto;
	border-collapse: collapse;
	width: 364px;
}
td {
	border: 1px solid gray;
	padding-left: 20px;
	width: 100px;
	line-height: 2em;
}
td.link a {
	position: absolute;
	z-index: 1;
	top: auto;
	left: 0;
	margin-top: -1em;
	padding-left: 20px;
	width: 344px;
	background: url(no.gif); /* trick IE to paint the area transparent to cover content */
	color: #000;
	text-decoration: none;
	text-align: left;
}/*
	height: 30px;
</style>
</head>
<body>
<div id="container">
	<table>
		<tr><td class="link"><a href="#nogo1">Link 1</a></td><td>abcd</td><td>1234</td></tr>
		<tr><td class="link"><a href="#nogo2">Link 2</a></td><td>abcd</td><td>1234</td></tr>
		<tr><td class="link"><a href="#nogo3">Link 3</a></td><td>abcd</td><td>1234</td></tr>
	</table>
</div>
</body>
</html>
5

Huge thanks for the code; that’s absolutely fantastic but unfortunately doesn’t work too well in this case because each row has a different height. Will definitely consider your code for anything I do in the future though with table rows with a set height, many thanks :slight_smile:

6

Just had that code snippet laying around. Glad you like it. :slight_smile:

7

Yup, it’s great, cheers erik :slight_smile: