CSS `display: table-cell`을 사용하여 colspan을 어떻게 시뮬레이션할 수 있나요?

Colspan/Rowspan을 사용하는 셀에 대한 테이블 형식 표시

현재 CSS 구현은 디스플레이 속성을 사용하여 테이블 형식 레이아웃에 대해 제한적인 지원을 제공합니다. 특히, display: table-cell이 있는 요소는 colspan 또는 rowspan 속성을 지원하지 않습니다.

샘플 코드:

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
  <div class="row">
    <div class="cell colspan2">Cell</div>
  </div>
</div>

문제:

디스플레이가 있는 요소에 대해 colspan 효과를 어떻게 얻을 수 있습니까? table-cell?

CSS 표시의 제한 사항:

안타깝게도 현재 CSS 사양에서는 table-cell 표시가 있는 요소에 colspan 또는 rowspan을 허용하지 않습니다. 참조 게시물에서 언급했듯이 이는 이 표시 모드의 제한 사항입니다.

대안:

CSS는 표시용 colspan과 동등한 기능을 제공하지 않기 때문에: table- 셀의 경우 다음과 같은 대체 레이아웃 방법을 사용해 보세요.

• 실제 HTML 사용 table
• display: table이 포함된 컨테이너 내에서 절대 위치에 있는 div 사용
• 유연한 레이아웃을 위한 그리드 시스템을 제공하는 Bootstrap과 같은 JavaScript 프레임워크 탐색

위 내용은 CSS `display: table-cell`을 사용하여 colspan을 어떻게 시뮬레이션할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!