디스플레이 상에 박스 섀도우가 있음 : Chrome에서 table-row-group이 실패 함

box-shadow이 Chrome에서 작동하지 않습니다.디스플레이 상에 박스 섀도우가 있음 : Chrome에서 table-row-group이 실패 함

나는 display 속성을 table-row-group으로 사용해야하는 테이블 레이아웃이 있습니다. tbody에 box-shadow을 넣으려고하는데 실패했습니다. 여기를 참조하십시오 - JSFiddle.

FF에서는 완벽하게 작동하지만 Chrome에서는 정상적으로 작동하지 않습니다. 다른 질문/제안을 살펴본 결과 display: block 속성에서 할 수있는 것처럼 보입니다.

display: table-row-group의 모든 해결 방법은 무엇입니까?

2014-06-25 Mayank

StackOverflow의 [다른 유사 질문] (http://stackoverflow.com/a/5605612/976897)을 기반으로, 나는'display : block'이 당신이 언급 한 것처럼 유일한 옵션 인 것 같아요. 이 문제를 해결하기 위해 Chromium 버그 추적 프로그램에 [버그가 게시 됨] (https://code.google.com/p/chromium/issues/detail?id=62445)이있는 것 같습니다. –

감사합니다 Chirag,하지만 안타깝게도 전체 레이아웃에 영향을 미치기 때문에 display : block을 사용할 수 없습니다. 기본적으로 테이블에는 여러 개의 tbody가 있으며 테이블 행 그룹을 사용해야합니다. – Mayank

@Mayank FireFox에서 여러분의 데모를 시험해 보았습니다. 그런 효과가 그리 인상적이지는 않지만'td' 요소에 적용된 박스 섀도우 스타일로 쉽게 얻을 수 있습니다.이 데모를 확인하십시오 http : // jsfiddle .net/viphalongpro/w4p5L/12/ –

해결 방법으로 th 또는 tr 태그 내에 div을 생성하고 box-shadow을 div에 할당 할 수 있습니다. 나는 이것을 this JSFiddle에서 처음으로 th 요소에 구현했습니다.

출처

2014-06-25 06:18:48

감사합니다 chirag. 그것은 잘 동작하지만 다시 전체 행이 아닌 div 아래의 그림자입니다. 이것이 실제 필요성이다. – Mayank

이 시도 :

는

tbody { 

-webkit-box-shadow: 5px 5px 3px green; 
-moz-box-shadow: 5px 5px 3px green; 
    box-shadow: 5px 5px 3px green; 
    display: block

}

그것은 작동합니다.

출처

2014-06-25 07:07:16

앞에서 언급했듯이 display : block을 사용할 수 없기 때문에 전체 레이아웃이 손상됩니다. 당신은 그것을 여기에서 볼 수 있습니다. http://jsfiddle.net/w4p5L/15/ – Mayank

디스플레이 상에 박스 섀도우가 있음 : Chrome에서 table-row-group이 실패 함

답변

관련 문제