title: On mouseover on the even rows of a table the box shadow is not visible
body: <p>I am facing a problem in CSS, I have a <code>table</code> and hovering on the <code>tr</code> of the table, a CSS is written for the box-shadow.  The problem is this box-shadow is not completely visible for the even row.</p>
  <p><a href="https://i.stack.imgur.com/9uSjO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9uSjO.png" alt="image that show hover box shadow on even rows" /></a></p>
  <p>The bottom part of box-shadow is hiding because of the next <code>td</code> element. Its working fine for odd rows.</p>
  <p>Here is the code sandbox <a href="https://codesandbox.io/s/admiring-black-kbwel" rel="nofollow noreferrer">link</a> of the problem.</p>
  <p>I tried with position relative and z-index but that not works for me. Any ideas?</p>