Can't figure out how to add shadows to table rows

[enyichiaagu]

Here is the Tailwind Play. I will like the shadows to show whenever I hover on table rows. Right now other rows are blocking the shadows and only the last one behaves the way I want the rest to. Thanks for the response.

[wongjn]

When applying the shadow, have the row be above in the z stack order:

 .orders tr:hover {
   box-shadow: 0 2px 8px rgb(0 0 0 / 0.82);
+  position: relative;
+  z-index: 1;
 }

https://play.tailwindcss.com/cXH3yhrOnP?file=css

[kevinjosh10]

Hi @community! By default in CSS, HTML tables collapse borders and table rows (<tr>) do not establish their own stacking contexts or box-shadow bounds. Here are the two clean ways to make row shadows work in Tailwind:

---

Method 1: Relative Stacking on Hover (Recommended)

Give the <tr> a relative position and higher z-index on hover so other rows don't clip the shadow:

<table class="border-separate border-spacing-0 w-full">
  <tr class="hover:relative hover:z-10 hover:shadow-lg transition-shadow">
    <td class="p-4 bg-white">Column 1</td>
    <td class="p-4 bg-white">Column 2</td>
  </tr>
</table>

Key rule: The <table> must use border-separate rather than border-collapse, otherwise browsers ignore row-level box-shadows.

---

Method 2: Cell-Level Shadows with Rounded Edges

If you want each row to look like a floating card:

<tr class="group">
  <td class="bg-white p-4 group-hover:shadow-md first:rounded-l-lg last:rounded-r-lg">...</td>
</tr>