CSS만 사용하여 DIV 요소가 테이블 셀을 채우도록 하려면 어떻게 해야 합니까?

CSS를 사용하여 DIV로 테이블 셀 채우기

웹 개발의 일반적인 과제 중 하나는 DIV 요소가 전체 공간을 차지하는 것입니다. 테이블 셀 내에서. CSS3의 발전에도 불구하고 이 문제는 수년 동안 지속되었습니다. 이 기사에서는 이 문제에 대한 동적 표 셀 크기를 수용하는 CSS 기반 솔루션을 살펴봅니다.

DIV의 너비와 높이를 100%로 설정하는 기존 접근 방식은 표 셀이 본질적으로 맞게 늘어나지 않기 때문에 효과가 없는 경우가 많습니다. 그들의 콘텐츠. 대신 원하는 결과를 얻으려면 테이블과 셀 속성을 조작해야 합니다.

다음 CSS 해킹은 DIV가 전체 테이블 셀을 채우도록 만드는 간단하고 효율적인 방법을 제공합니다.

tr { height: 1px; }
td { height: inherit; }
div { height: 100%; }

이 코드에서는 테이블 행(TR)의 최소 높이가 1px(일반적으로 브라우저에서 무시됨)로 설정되었습니다. 그런 다음 행에서 높이를 상속하도록 테이블 셀(TD)을 설정하여 DIV를 수용할 수 있도록 수직으로 늘어납니다. 마지막으로 DIV의 높이를 100%로 설정하여 DIV가 테이블 셀 내에서 사용 가능한 전체 공간을 차지하도록 했습니다.

이 솔루션은 테스트를 거쳐 IE Edge와 Chrome 브라우저 모두에서 작동하는 것으로 확인되었으며, 테이블 셀의 전체 높이와 너비로 DIV를 채우는 문제.

위 내용은 CSS만 사용하여 DIV 요소가 테이블 셀을 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!