CSS 테이블 레이아웃에서 \'display: table-column\'이 예상대로 작동하지 않는 이유는 무엇입니까?

내 CSS 레이아웃에서 "display: table-column"이 작동하지 않는 이유는 무엇입니까?

제공된 HTML 및 CSS 코드를 고려하면 2개의 열("colLeft" 및 "colRight")과 3개의 행("row1", "row2" 및 "row3")이 있는 레이아웃이 나타날 것으로 예상할 수 있습니다. 그러나 Chrome 및 IE와 같은 브라우저에서는 전체 레이아웃이 0 크기로 축소됩니다.

이러한 동작은 CSS 테이블 모델 작동 방식에 대한 근본적인 오해에서 발생합니다. HTML 테이블 모델과 유사하지만 중요한 차이점이 있습니다.

• 열은 직접 컨테이너가 아닙니다. HTML 테이블에서 열("")은 직접 컨테이너가 아닙니다. 세포를 포함합니다. 대신 셀("")은 행("")의 하위 항목입니다. 이 구조는 CSS 테이블 모델에서 유지됩니다.
• "display: table-column" 셀 속성 정의: 요소에 "display: table-column"을 사용해도 열이 생성되지 않습니다. 전통적인 의미. 대신, 테이블 행 내의 셀에 적용되는 속성을 설정합니다. 예를 들어 이를 사용하여 각 행의 첫 번째 셀의 배경색을 정의할 수 있습니다.
• 표준 테이블 구조: 테이블의 전체 구조는 HTML과 동일하게 유지됩니다. 행에는 셀이 포함되고 열에는 직접적인 내용이 포함되지 않습니다.

올바른 HTML 및 CSS 구조:

유효한 CSS 테이블 레이아웃을 생성하려면 다음을 수행해야 합니다. 다음 구조를 사용하십시오:

<code class="html"><div class="mytable">
  <div class="mycolumn1"></div>
  <div class="mycolumn2"></div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 1</div>
    <div class="mycell">Contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 2</div>
    <div class="mycell">Contents of second cell in row 2</div>
  </div>
</div></code>

<code class="css">.mytable {
  display: table;
}
.mycolumn1 {
  display: table-column;
  background-color: green;
}
.mycolumn2 {
  display: table-column;
  background-color: red;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}</code>

위 내용은 CSS 테이블 레이아웃에서 'display: table-column'이 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!