表示

要素の非表示、インライン、ブロック、フレックス、グリッドを選びます。

display で、文章の流れに入るか、ブロックとして改行するか、子要素を flex または grid で並べるかを選びます。インラインのまま幅も指定したい場合は inline-block、レイアウトから箱ごと取り除く場合は hidden を使います。

クラスと CSS の早見表

クラスの例	期待される宣言
`inline`	`display: inline;`
`inline-block`	`display: inline-block;`
`block`	`display: block;`
`flex`	`display: flex;`
`inline-flex`	`display: inline-flex;`
`grid`	`display: grid;`
`inline-grid`	`display: inline-grid;`
`hidden`	`display: none;`
`contents`	`display: contents;`
`flow-root`	`display: flow-root;`
`list-item`	`display: list-item;`
`table`	`display: table;`
`table-caption`	`display: table-caption;`
`table-cell`	`display: table-cell;`
`table-column`	`display: table-column;`
`table-column-group`	`display: table-column-group;`
`table-footer-group`	`display: table-footer-group;`
`table-header-group`	`display: table-header-group;`
`table-row`	`display: table-row;`
`table-row-group`	`display: table-row-group;`
`inline-table`	`display: inline-table;`

例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

インラインとブロック

inline は文章の流れに残り、inline-block は幅を指定しても行内に並び、block は新しい行から始まります。

インラインとブロック

HTML

<div class="wind-demo">
  <p class="wind-demo-note">Inline content stays in the sentence; block content starts a new line.</p>
  <div class="wind-demo-frame w-72">
    A <span class="wind-demo-tile inline">inline</span> B
    <span class="wind-demo-tile inline-block w-24">inline-block</span>
    <span class="wind-demo-tile block w-full">block takes its own line</span>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.w-24 {
  width: 6rem;
}
.w-72 {
  width: 18rem;
}
.w-full {
  width: 100%;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "block",
        "inline",
        "inline-block",
        "w-24",
        "w-72",
        "w-full"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

flex と grid で子要素を配置

flex と grid はブロックレベルのレイアウトコンテナを作り、inline-flex と inline-grid は文章の流れに残ります。

flex と grid で子要素を配置

HTML

<div class="wind-demo">
  <p class="wind-demo-note">Flex and grid arrange children; their inline forms can sit within text.</p>
  <div class="wind-demo-frame">
    <div class="flex gap-2">
      <div class="wind-demo-tile flex-1">flex</div><div class="wind-demo-tile">item</div>
    </div>
    <p>Read <span class="wind-demo-tile inline-flex">inline-flex</span> in a sentence.</p>
    <div class="grid grid-cols-3 gap-2">
      <div class="wind-demo-tile">grid 1</div><div class="wind-demo-tile">grid 2</div><div class="wind-demo-tile">grid 3</div>
    </div>
    <p>Read <span class="wind-demo-tile inline-grid grid-cols-2"><span>A</span><span>B</span></span> inline-grid in a sentence.</p>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.inline-flex {
  display: inline-flex;
}
.inline-grid {
  display: inline-grid;
}
.flex-1 {
  flex: 1 1 0%;
}
.grid-cols-2 {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-1",
        "gap-2",
        "grid",
        "grid-cols-2",
        "grid-cols-3",
        "inline-flex",
        "inline-grid"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

箱をレイアウトから取り除く

hidden は display:none を設定するため、次の項目がその場所に詰めて配置されます。

箱をレイアウトから取り除く

HTML

<div class="wind-demo">
  <div class="wind-demo-frame flex items-center gap-2">
    <div class="wind-demo-tile">First</div>
    <div class="wind-demo-tile hidden">Hidden item</div>
    <div class="wind-demo-tile">Next item moves into its place</div>
  </div>
  <p class="wind-demo-note">hidden removes the box from layout.</p>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.hidden {
  display: none;
}
.items-center {
  align-items: center;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "hidden",
        "items-center"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

追加の表示モード

additional-display は対応済みの Wind ユーティリティクラスを使います。

追加の表示モード

HTML

<div class="wind-demo-new"><div class="contents"><span>contents</span></div><div class="flow-root">flow-root</div><span class="list-item">list-item</span><table class="table"><caption class="table-caption">caption</caption><colgroup class="table-column-group"><col class="table-column"></colgroup><thead class="table-header-group"><tr class="table-row"><th class="table-cell">header</th></tr></thead><tbody class="table-row-group"><tr><td>body</td></tr></tbody><tfoot class="table-footer-group"><tr><td>footer</td></tr></tfoot></table><span class="inline-table"><span class="table-row"><span class="table-cell">inline table</span></span></span></div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-new {
  color: #203046;
  font: 14px / 1.5 system-ui, sans-serif;
}
.contents {
  display: contents;
}
.flow-root {
  display: flow-root;
}
.inline-table {
  display: inline-table;
}
.list-item {
  display: list-item;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-column {
  display: table-column;
}
.table-column-group {
  display: table-column-group;
}
.table-footer-group {
  display: table-footer-group;
}
.table-header-group {
  display: table-header-group;
}
.table-row {
  display: table-row;
}
.table-row-group {
  display: table-row-group;
}

この例の設定

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-new": true
    },
    "safelist": {
      "docs-preview": [
        "contents",
        "flow-root",
        "list-item",
        "table",
        "table-caption",
        "table-cell",
        "table-column",
        "table-column-group",
        "table-footer-group",
        "table-header-group",
        "table-row",
        "table-row-group",
        "inline-table"
      ]
    }
  }
}

デモ用の自作 CSS

.wind-demo-new { color: #203046; font: 14px/1.5 system-ui, sans-serif; }

任意値と名前付きの値

このファミリーは値の接尾辞や任意値を持たない、8 個の固定クラスです。inline、block、inline-block、flex、inline-flex、grid、inline-grid、hidden は display の種類に対応します。hidden は display:none です。invisible は箱の場所を残す別の visibility ユーティリティです。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

block

フィールド	値
カタログ識別子	`v1.block`
クラスパターン	`block`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"block"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`block`	`display: block`

フィールド	値
カタログ識別子	`v1.contents`
クラスパターン	`contents`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"contents"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`contents`	`display: contents`

flex

フィールド	値
カタログ識別子	`v1.flex`
クラスパターン	`flex`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"flex"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`flex`	`display: flex`

flow-root

フィールド	値
カタログ識別子	`v1.flow-root`
クラスパターン	`flow-root`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"flow-root"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`flow-root`	`display: flow-root`

grid

フィールド	値
カタログ識別子	`v1.grid`
クラスパターン	`grid`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"grid"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`grid`	`display: grid`

hidden

フィールド	値
カタログ識別子	`v1.hidden`
クラスパターン	`hidden`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"none"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`hidden`	`display: none`

inline

フィールド	値
カタログ識別子	`v1.inline`
クラスパターン	`inline`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"inline"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`inline`	`display: inline`

inline-block

フィールド	値
カタログ識別子	`v1.inline-block`
クラスパターン	`inline-block`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"inline-block"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`inline-block`	`display: inline-block`

inline-flex

フィールド	値
カタログ識別子	`v1.inline-flex`
クラスパターン	`inline-flex`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"inline-flex"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`inline-flex`	`display: inline-flex`

inline-grid

フィールド	値
カタログ識別子	`v1.inline-grid`
クラスパターン	`inline-grid`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"inline-grid"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`inline-grid`	`display: inline-grid`

inline-table

フィールド	値
カタログ識別子	`v1.inline-table`
クラスパターン	`inline-table`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"inline-table"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`inline-table`	`display: inline-table`

list-item

フィールド	値
カタログ識別子	`v1.list-item`
クラスパターン	`list-item`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"list-item"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`list-item`	`display: list-item`

table

フィールド	値
カタログ識別子	`v1.table`
クラスパターン	`table`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table`	`display: table`

table-caption

フィールド	値
カタログ識別子	`v1.table-caption`
クラスパターン	`table-caption`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table-caption"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table-caption`	`display: table-caption`

table-cell

フィールド	値
カタログ識別子	`v1.table-cell`
クラスパターン	`table-cell`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table-cell"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table-cell`	`display: table-cell`

table-column

フィールド	値
カタログ識別子	`v1.table-column`
クラスパターン	`table-column`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table-column"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table-column`	`display: table-column`

table-column-group

フィールド	値
カタログ識別子	`v1.table-column-group`
クラスパターン	`table-column-group`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table-column-group"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table-column-group`	`display: table-column-group`

table-footer-group

フィールド	値
カタログ識別子	`v1.table-footer-group`
クラスパターン	`table-footer-group`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table-footer-group"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table-footer-group`	`display: table-footer-group`

table-header-group

フィールド	値
カタログ識別子	`v1.table-header-group`
クラスパターン	`table-header-group`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table-header-group"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table-header-group`	`display: table-header-group`

table-row

フィールド	値
カタログ識別子	`v1.table-row`
クラスパターン	`table-row`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table-row"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table-row`	`display: table-row`

table-row-group

フィールド	値
カタログ識別子	`v1.table-row-group`
クラスパターン	`table-row-group`
文法	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
受け入れる値	`1`
トークンカテゴリ	トークンカテゴリなし
負の値の規則	`forbidden`
競合グループと順位	`display` (`1`)
並び順の順位	`0`
セレクタの形	`ownElement`
仕様バージョン	`1`
出力するプロパティ	`display`

受け入れる値

種類	接尾辞	出力される値
`exact`	`null`	`"table-row-group"`

宣言テンプレート

プロパティ	値の種類	固定値
`display`	`resolved`	`null`

カタログの例

クラスの例	期待される宣言
`table-row-group`	`display: table-row-group`