CSS '표시: 테이블 열'은 어떻게 작동하나요?

HTML에서 테이블은 행으로 구성되며, 각 행은 세포를 함유하고 있습니다. CSS는 이 개념을 확장하여 디자이너가 특정 행 및 열 레이아웃을 정의할 수 있도록 합니다. "display: table-row"와 "display: table-cell"은 간단하지만 "display: table-column"은 좀 더 미묘한 목적을 가지고 있습니다.

"display: table- 열"

"display: table-row" 및 "display: table-cell"과 달리 "display: table-column"은 새로운 열 구조를 설정하지 않습니다. 대신 기존 테이블 행 내의 셀에 대한 속성을 설정합니다. 예를 들어, 각 행의 첫 번째 셀의 배경색을 지정할 수 있습니다.

HTML과 CSS 테이블 구조

이 개념을 이해하려면 다음 HTML을 고려하세요. 테이블:

Cell 1
    
Cell 2
  
Cell 3
    
Cell 4
  

HTML 구조에 대응하여 다음 CSS를 적용할 수 있습니다.

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

이 예에서 ".column1" 및 ".column2" div는 콘텐츠의 컨테이너가 아닙니다. 이는 단지 표 행 내의 셀에 대한 속성을 정의할 뿐입니다.

기억해야 할 핵심 사항

• "display: table-column"은 표 행 내의 셀에 대한 속성을 설정합니다. , 열 자체에는 해당되지 않습니다.
• 기본 테이블 구조는 HTML과 동일하게 유지되며 셀은 행의 하위 항목입니다.
• "display: table-column"은 다중에 대한 메커니즘을 제공하지 않습니다. -콘텐츠가 열 사이에 흐르는 열 레이아웃.