<display-internal> - CSS: Cascading Style Sheets

table과 ruby 같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.

문법

유효한 <display-internal> 값들:

table-row-group: 이 요소는 <tbody> HTML 요소처럼 동작합니다.
table-header-group: 이 요소는 <thead> HTML 요소처럼 동작합니다.
table-footer-group: 이 요소는 <tfoot> HTML 요소처럼 동작합니다.
table-row: 이 요소는 <tr> HTML 요소처럼 동작합니다.
table-cell: 이 요소는 <td> HTML 요소처럼 동작합니다.
table-column-group: 이 요소는 <colgroup> HTML 요소처럼 동작합니다.
table-column: 이 요소는 <col> HTML 요소처럼 동작합니다.
table-caption: 이 요소는 <caption> HTML 요소처럼 동작합니다.
ruby-base: 이 요소는 <rb> HTML 요소처럼 동작합니다.
ruby-text: 이 요소는 <rt> HTML 요소처럼 동작합니다.
ruby-base-container: 이 요소는 익명의 박스로 만들어지는 <rbc> HTML 요소처럼 동작합니다.
ruby-text-container: 이 요소는 <rtc> HTML 요소처럼 동작합니다.

예제

CSS 테이블의 예시

다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.

HTML

<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age">
  </div>
</main>

CSS

main {
  display: table;
}

div {
  display: table-row;
}

label, input {
  display: table-cell;
  margin: 5px;
}

결과

사양

사양	상태
CSS Display Module Level 3 The definition of 'display-internal' in that specification.	Candidate Recommendation

브라우저 호환성

Table 관련 값의 지원

BCD tables only load in the browser

table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group

Ruby 관련 값의 지원

BCD tables only load in the browser

ruby, ruby-base, ruby-base-container, ruby-text, ruby-text-container

같이 보기

display