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

문법

유효한 값들:

table-row-group

이 요소는 HTML 요소처럼 동작합니다.

table-header-group

이 요소는 HTML 요소처럼 동작합니다.

이 요소는 HTML 요소처럼 동작합니다.

table-row

이 요소는 HTML 요소처럼 동작합니다.

table-cell

이 요소는 HTML 요소처럼 동작합니다.

table-column-group

이 요소는 HTML 요소처럼 동작합니다.

table-column

이 요소는 HTML 요소처럼 동작합니다.

table-caption

이 요소는 HTML 요소처럼 동작합니다.

ruby-base

이 요소는 HTML 요소처럼 동작합니다.

ruby-text

이 요소는 HTML 요소처럼 동작합니다.

ruby-base-container

이 요소는 익명의 박스로 만들어지는 HTML 요소처럼 동작합니다.

ruby-text-container

이 요소는 HTML 요소처럼 동작합니다.

예제

CSS 테이블의 예시

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

HTML

html

CSS

css
main {
  display: table;
}

div {
  display: table-row;
}

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

결과

명세서

No specification found

No specification data found for css.properties.display.table-row-group,css.properties.display.table-header-group,css.properties.display.table-footer-group,css.properties.display.table-row,css.properties.display.table-cell,css.properties.display.table-column-group,css.properties.display.table-column,css.properties.display.table-caption,css.properties.display.ruby-base,css.properties.display.ruby-text,css.properties.display.ruby-base-container,css.properties.display.ruby-text-container.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

브라우저 호환성

css.properties.display.table-row-group

css.properties.display.table-header-group

css.properties.display.table-row

css.properties.display.table-cell

css.properties.display.table-column-group

css.properties.display.table-column

css.properties.display.table-caption

css.properties.display.ruby-base

css.properties.display.ruby-text

css.properties.display.ruby-base-container

css.properties.display.ruby-text-container

같이 보기