<display-internal>

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

문법

유효한 <display-internal> 값들:

table-row-group

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

table-header-group

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

이 요소는 <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 Experimental

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

ruby-text Experimental

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

ruby-base-container Experimental

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

ruby-text-container Experimental

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

예제

CSS 테이블의 예시

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

HTML

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-row-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-header-group

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-header-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-footer-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-row

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-row

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-cell

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-cell

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-column-group

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-column-group

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-column

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-column

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.table-caption

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
table-caption

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.ruby-base

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-base

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

css.properties.display.ruby-text

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-text

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

css.properties.display.ruby-base-container

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-base-container

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

css.properties.display.ruby-text-container

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ruby-text-container

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

같이 보기