CSS에서 \'display: table-column\'은 실제로 무엇을 합니까?

CSS "display: table-column"은 어떻게 작동하나요?

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

"display: table- column"

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

HTML과 CSS 테이블 구조

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

<code class="html"><table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table></code>

HTML 구조에 따라 다음 CSS를 적용할 수 있습니다.

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

이 예에서 ".column1" 및 ".column2" div는 그렇지 않습니다. 콘텐츠를 담는 용기. 이는 단지 표 행 내의 셀에 대한 속성을 정의할 뿐입니다.

기억해야 할 핵심 사항

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

위 내용은 CSS에서 \'display: table-column\'은 실제로 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!