<display-internal>

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 íì´ë¸ì ìì

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;
}

ê²°ê³¼

ëªì¸ì

Specification
CSS Display Module Level 4 # valdef-display-table-row-group
CSS Display Module Level 4 # valdef-display-table-header-group
CSS Display Module Level 4 # valdef-display-table-footer-group
CSS Display Module Level 4 # valdef-display-table-row
CSS Display Module Level 4 # valdef-display-table-cell
CSS Display Module Level 4 # valdef-display-table-column-group
CSS Display Module Level 4 # valdef-display-table-column
CSS Display Module Level 4 # valdef-display-table-caption
CSS Display Module Level 4 # valdef-display-ruby-base
CSS Display Module Level 4 # valdef-display-ruby-text
CSS Display Module Level 4 # valdef-display-ruby-base-container
CSS Display Module Level 4 # valdef-display-ruby-text-container