<display-internal>
table
과 ruby
같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.
문법
유효한 <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 요소처럼 동작합니다. -
이 요소는
<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
<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;
}
결과
명세서
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
BCD tables only load in the browser
css.properties.display.table-header-group
BCD tables only load in the browser
css.properties.display.table-footer-group
BCD tables only load in the browser
css.properties.display.table-row
BCD tables only load in the browser
css.properties.display.table-cell
BCD tables only load in the browser
css.properties.display.table-column-group
BCD tables only load in the browser
css.properties.display.table-column
BCD tables only load in the browser
css.properties.display.table-caption
BCD tables only load in the browser
css.properties.display.ruby-base
BCD tables only load in the browser
css.properties.display.ruby-text
BCD tables only load in the browser
css.properties.display.ruby-base-container
BCD tables only load in the browser
css.properties.display.ruby-text-container
BCD tables only load in the browser