배경색이 상자 그림자를 숨기는 것을 방지하려면 어떻게해야합니까?

Question

td 또는 tr에 background-color을 추가하면 부모 테이블에 box-shadow이 표시되지 않습니다.

최소 예 : 나는 테이블에 가짜 국경 box-shadow을 사용하고

table { 
 
    box-shadow: inset -1px -1px 0 0 blue; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    box-shadow: inset 1px 1px 0 0 blue; 
 
} 
 

 
.highlight { 
 
    background-color: #efe; 
 
}

<table> 
 
    <tr> 
 
    <td>box shadow border fine here</td> 
 
    </tr> 
 
    <tr> 
 
    <td>and here</td> 
 
    </tr> 
 
    <tr class="highlight"> 
 
    <td>but not with background-color</td> 
 
    </tr> 
 
</table>

. 누락 된 부분을 채우기 위해 각 td에 "위쪽 및 왼쪽"을 표시하고 table에 "아래쪽 및 오른쪽"을 표시합니다. table에서 오는

하지만 내 테이블의 모든 td 또는 tr는이 경우 background-color (.highlight)을 box-shadow

가 사라집니다.

(내가 이것을하고있는 이유는 테이블의 텍스트에도 적용되는 세로 리듬을 설정했기 때문입니다. 표준 표 경계선과 표준 라인 높이를 사용하면 수직 리듬. 테두리 높이를 변경하여 경계를 잘못 계산하려는 경우에도 텍스트가 줄 바꿈 될 수 있기 때문에 줄 바꿈에 대한 테두리 조정이 텍스트 블록에 대해 단 한 번이 아닌 모든 텍스트 행에 적용됩니다.)

Answer 1

제한 배경 크기 픽셀 1에 덜. 사용 CALC (100 % - 1 x 1 픽셀)이 대한 :

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 

 

 
table { 
 
    box-shadow: inset -1px -1px 0 0 blue; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    box-shadow: inset 1px 1px 0 0 blue; 
 
} 
 

 
td:last-child { 
 
    box-shadow: inset 1px 1px 0 0 blue, inset -1px 0px 0 0 blue; 
 
} 
 

 
tr:last-child td { 
 
    box-shadow: inset 1px 1px 0 0 blue, inset 0px -1px 0 0 blue; 
 
} 
 

 
tr:last-child td:last-child { 
 
    box-shadow: inset 1px 1px 0 0 blue, inset -1px -1px 0 0 blue; 
 
} 
 

 
.highlight td { 
 
    background-color: yellow; 
 
}

<table> 
 
    <tr> 
 
    <td>box shadow border fine here</td> 
 
    <td>-</td> 
 
    </tr> 
 
    <tr> 
 
    <td>and here</td> 
 
    <td>-</td> 
 
    </tr> 
 
    <tr class="highlight"> 
 
    <td>but not with background-color</td> 
 
    <td>(second cell to illustrate gap)</td> 
 
    </tr> 
 
    <tr class="highlight"> 
 
    <td>second row to illustrate gap</td> 
 
    <td>-</td> 
 
    </tr> 
 
</table>

:

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 

 

 
table { 
 
    box-shadow: inset -1px -1px 0 0 blue; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    box-shadow: inset 1px 1px 0 0 blue; 
 
} 
 

 
.highlight td { 
 
    background-image: linear-gradient(red, red); 
 
    background-repeat: no-repeat; 
 
} 
 
.highlight td:last-child { 
 
    background-size: calc(100% - 1px) 100%; 
 
} 
 
.highlight:last-child td { 
 
    background-size: 100% calc(100% - 1px); 
 
} 
 
.highlight:last-child td:last-child { 
 
    background-size: calc(100% - 1px) calc(100% - 1px); 
 
}

<table> 
 
    <tr> 
 
    <td>box shadow border fine here</td> 
 
    <td>-</td> 
 
    </tr> 
 
    <tr> 
 
    <td>and here</td> 
 
    <td>-</td> 
 
    </tr> 
 
    <tr class="highlight"> 
 
    <td>but not with background-color</td> 
 
    <td>(second cell to illustrate gap)</td> 
 
    </tr> 
 
    <tr class="highlight"> 
 
    <td>second row to illustrate gap</td> 
 
    <td>-</td> 
 
    </tr> 
 
</table>

또 다른 방법은 대신 테이블의 TD에 그림자와 함께 연주,이 결과를 얻을 수 있습니다

Answer 2

오프셋없이 상자 그림자를 사용하십시오. 이 같은 : 전체 크기보다

table { 
    border-collapse: collapse; 
    border-spacing: 0; 

} 

td { 
    box-shadow: inset 0px 0px 1px blue; 
} 

.highlight { 
    background-color: yellow; 
}