테이블 행에 대한 CSS 상자 그림자?

Question

내 HTML 코드는 다음과 같습니다.

<style>
.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: 1px 1px 5px 5px #d99292;
}
</style>
<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

목표는 첫 번째 행 주위에 그림자를 두는 것입니다. 문제는 셀 4의 배경색이 그것을 가리고 있다는 것입니다.

내 질문은 : 4 셀의 배경 위에 드롭 쇼를 표시하려면 어떻게합니까?

편집 : 후속 질문 참조 : css inset box-shadow for table row?

Answer 1

다음 셀의 Z- 색인을 낮 춥니 다.

.yellow {
  background-color: yellow;
}

td {
  width: 40px;
}

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

tr:first-child  + tr td {
  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>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>