CSS3는 어떻게 DIV를 확장하여 표 셀을 채울 수 있나요?

테이블 셀 내에서 DIV를 채우는 CSS3 솔루션

DIV를 테이블 셀에 채우는 고전적인 질문을 확장하여 우리는 최신 솔루션을 탐색하려면 CSS3의 세계로 들어가십시오.

과제

DIV의 너비와 높이를 100%로 설정하는 등의 기존 솔루션은 최신 브라우저에서 더 이상 작동하지 않습니다. 다양한 테이블 셀 크기에 동적으로 적응하는 보다 우아한 방법이 필요합니다.

CSS3 Savior

CSS3는 TR(테이블 행) 및 TD(테이블 데이터) 요소의 높이 속성을 교묘하게 조작하여 "상속" 속성이라는 개념을 도입합니다. , TD 내의 DIV가 전체를 채우도록 효과적으로 강제할 수 있습니다. cell.

해결책

1. 1px와 같은 가짜 높이로 TR을 정의합니다. 어쨌든 이 높이는 브라우저에서 무시됩니다.
2. TD의 높이를 "상속"으로 설정합니다. 이는 TD가 상위 항목( TR).
3. DIV의 높이를 "100%"로 설정합니다.

이 기술을 사용하면 DIV가 TD의 상속된 높이를 상속할 수 있으며, 이는 TD의 내용에 따라 동적으로 결정됩니다. 셀.

브라우저 호환성

이 솔루션은 테스트를 거쳐 IE Edge와 Chrome 모두에서 작동하는 것으로 확인되었습니다.

예제 코드

위 내용은 CSS3는 어떻게 DIV를 확장하여 표 셀을 채울 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!