How to make table row a clickable link?

[iamsaumya]

I want to make a table row a link.
I wrapped a <tr> element or all the <td> elements of a table row in <a> but it is not working out for me!

This is a code sandbox where I have demonstrated both the examples.
Link to codesandox.

Can someone help me achieve with tailwindcss, please?

[richadr]

Inserting an <a> around <tr> in a <table> is not valid html. See "Permitted content" in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

You can use onclick handler on the <tr> and use a bit of JavaScript, or my preferred way, use <div> tags and use Tailwind's .table, .table-row, .table-cell classes to give them table behavior and styling.

https://tailwindcss.com/docs/display#class-reference

[iamsaumya]

Thanks! I used tailwind table classes and it worked flawlessly.

[ZainabBabayaro]

How did you achieve this, please?

[JayMGurav]

this should be helpful display table classes

[Mitcal]

I found this resource very good at explaining this problem and how to resolve it: https://robertcooper.me/post/table-row-links#solution-3-use-css-grid-to-create-a-table

[sntran]

I'll provide a pure CSS solution to achieve this.

<tr class="relative">
  <td>Cell 1</td>
  <td><a href="#" class="after:absolute after:inset-0">Click me</a></td>
</tr>

https://codepen.io/sntran/pen/zYQBbNY

The idea is to extend the <a> to cover the whole row by adding a pseudo-element that is absolutely positioned against the row.

[wiledal]

⚠️ Be warned, this is currently borked in Safari (and apparently has been for years). It ignores the relative position of the tr, making the :after bleed onto the entire page.

[wiledal]

Since Safari does not support position: relative on tr's (https://bugs.webkit.org/show_bug.cgi?id=240961) the above ☝️ answer will not work.

A cross-browser way to do this is to put the relative on the td instead, maximize the width, and add overflow-hidden to the table.

https://codesandbox.io/p/devbox/xpqzxv

<table className="overflow-hidden">
  <tr>
    <td>
     first cell
    </td>
    <td class="relative">
      <a href="#" class="after:absolute after:-left-[2000px] after:w-[9999px]">
        Click me
      </a>
    </td>
    <td>
      something
    </td>
    <td>
      something else
    </td>
  </tr>
</table>