Css Box-shadow For Table Row?

Here is my HTML code: The goal is to have a drop shadow around the first row. The problem is that the background color of cell 4 is obscuring it. My question is: how do I make the

Solution 1:

Lower the z-index of the next cells:

.yellow {
  background-color: yellow;
}

td {
  width: 40px;
}

tr:first-child {
  box-shadow: 1px1px5px5px#d99292;
}

tr:first-child  + trtd {
  position: relative;
  z-index: -1;
}

/* the below is not mandatory but to make sure 
the cells doesn't go below the table */table {
  position:relative;
  z-index:0;
}

<table><tr><tdclass=yellow>1</td><td>2</td></tr><tr><td>3</td><tdclass=yellow>4</td></tr></table>