2 Ways to Make HTML Table Rows Clickable

In this tutorial, I’ll teach you two quick ways to make HTML table rows clickable. We’ll start with an HTML/CSS approach. Then, we’ll continue with another one that also uses a bit of JavaScript. Finally, we’ll see how to adapt one of these methods in Bootstrap tables.

Consider the following table:

Here I’m listing some of my latest Tuts+ tutorials. Ideally, the readers should be able to click on each table row (tutorial) and navigate to the associated page/tutorial.

Let’s cover two methods to satisfy this requirement.

HTML/CSS Method

This first approach requires only HTML and CSS.

The actions needed are the following:

We’ll pass inside the cells of each table row a link with the target URL.

1	...
2	<tbody>
3	<tr>
4	<td>
5	<a href="PAGE_URL" target="_blank">...</a>
6	</td>
7	<td>
8	<a href="PAGE_URL" target="_blank">...</a>
9	</td>
10	<td>
11	<a href="PAGE_URL" target="_blank">...</a>
12	</td>
13	</tr>
14	</tbody>
15	...

We’ll make sure that the table borders are collapsed, so there aren’t any gaps between the links.

We’ll add some styles to the links. Most importantly, we’ll make them block-level elements.

Here’s the corresponding demo:

One thing to note is that on small screens where the texts of the first columns wrap, the table links don’t have equal heights.

Of course, depending on your content, you can fix this in different ways, for example:

If your cells aren’t wide enough, you can make the first column of each row sticky and give the table white-space: nowrap.
You can lay out the table rows and cells using CSS Grid and flexbox—might be tricky!
You can also use JavaScript to calculate the links’ heights of each table row on DOM load and window resize and make them equal.

In this case, we’ll go with the third solution that we should use carefully as performance matters. Happily enough, we’ll reuse one function we’ve defined in a previous demo and just make a few adjustments. If we want, we can fire this code only on small screens, but again this depends on the table contents.

Here’s the JS needed:

const tableRows = document.querySelectorAll(".table-clickable tbody tr");

function setTableLinksHeights() {
  for (const tableRow of tableRows) {
    const tableRowLinks = tableRow.querySelectorAll("a");
    setEqualHeights(tableRowLinks);
  }
}

function setEqualHeights(el) {
  let counter = 0;
  for (let i = 0; i < el.length; i++) {
    el[i].style.removeProperty("height");
    const singleHeight = el[i].offsetHeight;

    if (counter < singleHeight) {
      counter = singleHeight;
    }
  }

  for (let i = 0; i < el.length; i++) {
    el[i].style.height = `${counter}px`;
  }
}

setTableLinksHeights();
window.addEventListener("resize", setTableLinksHeights);

JavaScript Method

An alternative approach requires a few lines of JavaScript to turn table rows into clickable elements.

The actions needed are the following:

For each row, we’ll set a custom HTML attribute with the target URL.

1	...
2	<tbody>
3	<tr data-href="PAGE_URL">
4	<td>...</td>
5	<td>...</td>
6	<td>...</td>
7	</tr>
8	...
9	</tbody>
10	...

We’ll indicate that table rows are clickable elements by giving them cursor: pointer. Similarly to the previous example, we’ll provide a few styles for the hover state.
We’ll listen for the click event on the table rows, and upon firing, we’ll open the target page in a new browser tab.

const tableRows = document.querySelectorAll(".table-clickable tbody tr");

for (const tableRow of tableRows) {
  tableRow.addEventListener("click", function () {
    window.open(this.dataset.href, "_blank");
  });
}

It’s worth noting that if you don’t care about opening a new tab, instead of the open() method, you can use the href property like this:

1	window.location.href = this.dataset.href;

If you try this approach, make sure to view the demo in debug mode.

We can omit the window prefix in both cases.

Here’s the corresponding demo:

Bootstrap Tables

We applied the methods above in tables that use our own styles. But, we can easily embed them into tables styled by popular frameworks like Bootstrap.

In the demo below, we style our table with Bootstrap styles (notice the extra classes we pass) and turn its rows into clicks using the aforementioned second approach.

Conclusion

In this tutorial, we examined two ways of making the entire table rows clickable. Along the way, we showed how to combine these techniques with Bootstrap tables. These methods are really useful when you list posts/projects in tabular format and want users to navigate to their inner pages.

If you can think of another way, don’t forget to share it with us!

As always, thanks a lot for reading!