How to make an entire row in a table behave like a link?

html

responsive-design

css

accessibility

byAnton Shumikhin·Nov 11, 2024

Attach a JavaScript click event listener to each tr element, making it clickable and redirecting you to a URL stored in a data-url attribute when it's clicked:

document.querySelectorAll('tr[data-url]').forEach(row => {
  // Say hello to a new location!
  row.onclick = () => location.href = row.dataset.url;
});

Now, each tr in your HTML should carry that magical attribute, data-url:

<tr data-url="http://example.com/page1">
  <td>Content 1</td>
  <td>Content 2</td>
</tr>

This mighty piece of JavaScript needs to be summoned only after the entire table is fully settled in the DOM.

Better user feedback - cursor changes

Level up your UX skills and make your users' life easier! When they hover over these multi-functional table rows, the cursor should morph into a pointer. Behold the power of CSS:

tr[data-url] {
  cursor: pointer; 
  /* Is it a bird? Is it a plane? No, it’s a pointer! */
}

This simple trick is like an unspoken agreement - the row is interactive, just like a traditional hyperlink.

Dynamic table support using jQuery

Tables tend to change, they get sorted, loaded via ajax, and might feel left out without the clickable feature. Fear not, just call upon jQuery:

$(document).ready(function(){
  // Clickability, assemble!
  $(document).on('click', 'tr[data-url]', function() {
    window.location = $(this).data('url');
  });
});

The humble .on() method will ensure all row-clicking works smoothly even after dynamic updates.

Semantic HTML - readability, future you will thank you!

It might be tempting to encase your td elements with a tags, but resist the temptation, dear Padawan. Keep your HTML structure clean and legible. Future you will thank you!

Making clickable rows stand out

Help your users recognize interactive rows with a dash of style:

tr[data-url] {
  /* Subtle, like a secret handshake */
  background-color: #f0f0f0; 
} 
tr[data-url]:hover {
  /* Hovering intensifies */
  background-color: #e0e0e0; 
}

Styles on rows scream, “Hey, I'm interactive, click me!”

Building compatibility - say hi to Bootstrap

Sometimes frameworks like Bootstrap sneak into your project. If that happens, make use of their in-house solution, the handy stretched-link class, which swiftly expands a child link to fit the parent container.

Accessibility - making friends with `aria` roles

Accessibility is no laughing matter. Make sure your table rows play well with screen readers and keyboard navigation by using proper aria roles. Because everyone deserves to surf the net.

The mighty clickable rows in CSS

By making a tags "display: block;", there will be no escape from clicking:

td a {
  display: block;
  width: 100%;
  height: 100%;
  /* The link neither confirms nor denies being a chameleon */
  color: inherit; 
  /* Optional: Underline-ectomy */
  text-decoration: none; 
}