テーブル

テーブル

Markdown 拡張機能 のすべてに加えた、標準の GFM パイプテーブルです - bxsites.yaml の設定は不要で、常に有効です:

| Feature      | Community | Enterprise |
| ------------ | :-------: | ---------: |
| Themes       |    10     |         10 |
| Multi-locale |    Yes    |        Yes |
| Support      |  Forums   |     24/7   |

これは次のようにレンダリングされます:

見出しの下にある --- の行がテーブルを有効にします。その区切り行にコロンを 付けることで、列ごとの配置を制御できます - :--- は左寄せ、:---: は 中央寄せ、---: は右寄せです（コロンをまったく付けない場合はすべての列が 左寄せになります）。

セルの内容は通常のインライン Markdown

code、太字、斜体、リンク は、ページの他の場所と まったく同じように、セルの中でもそのまま使えます:

| Setting | Value |
| --- | --- |
| Default theme | `bootstrap` |
| Docs | [Themes guide](themes.md) |
| Status | **Stable** |

これは次のようにレンダリングされます:

セル内のパイプをエスケープする

セル自身のプレーンテキストの中にあるリテラルな | はバックスラッシュ （\|）が必要です - エスケープされていない | は次の列の区切りとして 読み取られてしまいます:

| Expression | Meaning |
| --- | --- |
| a \| b | bitwise OR |

これは次のようにレンダリングされます:

インラインコードの中の | はまったくエスケープが不要です - コードスパン （`a | b`）がすでにそれを保護しているためです:

短い行と長い行

データ行は見出しの列数と厳密に一致していなくても構いません - 短い行は空の セルで埋められ、長い行は余分なセルが黙って破棄されます。どちらも下記の tableOptions.appendMissingColumns/discardExtraColumns で制御されます:

| One | Two | Three |
| --- | --- | --- |
| a | b |
| c | d | e | f |

これは次のようにレンダリングされます:

パース設定

短い行/長い行の扱い、--- 区切り行自体の厳密さ、そしてレンダリングされる すべての <table> が持つ CSS クラスは、いずれも bxsites.yaml の markdown.tableOptions で制御されます - このページ全体で示しているデフォルト値でほとんどの場合は十分です。

レスポンシブなスクロールと固定ヘッダー

レンダリングされる各テーブルは、bxsites.yaml の設定も追加の markdown も不要で、 自動的に .bxsites-table-wrap div でラップされます。これにより、幅の広い テーブルはページ全体からはみ出す代わりに独自の横スクロールバーを持ち、丈の高い テーブルは（max-height を超えた分だけ）固定の高さに収められて独自の縦スクロール バーを持ち、見出し行はその場に固定されたまま本文だけが下でスクロールします - 上記のような短いテーブルは、すでに収まっているため、スクロールバーがまったく 生成されません。カスタムの theme/ オーバーライドは、他の CSS クラスと同様に .bxsites-table-wrap（とりわけその max-height）を再スタイリングできます。

テーマ

すべての組み込みテーマは、テーブルを独立したカードとしてレンダリングします - 角丸でボーダーのあるラッパー、色味を付けたヘッダー帯、縦の罫線を持たない 横方向の行区切り、そして行のゼブラ/ホバーの色味です。これらはすべて、テーマ自身の assets/style.css でモードごと（:root と [data-theme="dark"]）に宣言された 6 つの CSS カスタムプロパティから描画されます。

どれも両方のモードで宣言されているため、テーブルはページの他の部分と同じように テーマ切り替えに追従し、暗いページに明るいモードの白い塊が取り残されることは ありません。いずれも extraCss から差し替えられます - テーマのオーバーライドは不要です。

[data-theme="dark"] {
	--bxsites-table-head-bg: #241b2e;
	--bxsites-table-hover-bg: rgba(167, 139, 250, 0.12);
}

--bxsites-table-stripe-bg/-hover-bg はアルファ色のままにしてください。これらは --bxsites-table-bg が敷いた面の上に描画されるため、不透明な値を指定すると 色味を付ける代わりにカード面を覆ってしまいます。色以外のもの - パディング、 角丸の半径、大文字のヘッダーラベル - は、テーマ内の他の CSS と同じく本物の theme/ オーバーライドになります。

プレーンなデータの先へ

プレーンなテーブルの上に、さらに次の2つのレシピを直接組み合わせられます:

• セル内のステータスチップやスターレーティングが必要ですか？ ビジュアライザーのレシピ を参照してください。
• 読者に実際にテーブルをクライアントサイドでソート・フィルタさせたい、 単に読ませるだけでは足りない場合は？ソート・フィルタ可能なテーブル を参照してください。