テーブルの使い方
Markdownのテーブルは、スマホなど画面幅が狭い環境でも横スクロールで快適に閲覧できます。 また、デフォルトで左列が固定されるため、横にスクロールしても項目名が見えたままになります。
基本的な使い方
Section titled “基本的な使い方”通常のMarkdownテーブル記法をそのまま使うだけで、自動的に横スクロール対応になります。
| プロトコル | ポート番号 | 説明 | 用途 ||-----------|-----------|------|------|| HTTP | 80 | Webページの通信 | ブラウザ || HTTPS | 443 | 暗号化されたWeb通信 | セキュアなサイト || SSH | 22 | リモートログイン | サーバー管理 || DNS | 53 | 名前解決 | ドメイン→IP変換 || プロトコル | ポート番号 | 説明 | 用途 |
|---|---|---|---|
| HTTP | 80 | Webページの通信 | ブラウザ |
| HTTPS | 443 | 暗号化されたWeb通信 | セキュアなサイト |
| SSH | 22 | リモートログイン | サーバー管理 |
| DNS | 53 | 名前解決 | ドメイン→IP変換 |
左列（プロトコル）が固定されているので、横にスクロールしても常に表示されます。
左列固定を無効にする
Section titled “左列固定を無効にする”最初のセルに ~ を付けると、そのテーブルは左列固定が無効になります。
| ~項目 | 値 | 備考 ||-------|-----|------|| A | 100 | サンプル || B | 200 | テスト || 項目 | 値 | 備考 |
|---|---|---|
| A | 100 | サンプル |
| B | 200 | テスト |
~ はページ上には表示されません。
横に長いテーブルの例
Section titled “横に長いテーブルの例”多くの列があるテーブルでも、横スクロールで全体を確認できます。
| OSI層 | 層番号 | 役割 | プロトコル例 | 機器例 | PDU名 ||------|-------|------|------------|-------|------|| アプリケーション層 | 7 | アプリケーション間通信 | HTTP, FTP, SMTP | - | データ || プレゼンテーション層 | 6 | データ形式の変換 | SSL/TLS, JPEG | - | データ || セッション層 | 5 | 通信の開始・終了管理 | NetBIOS | - | データ || トランスポート層 | 4 | 信頼性のある通信 | TCP, UDP | - | セグメント || ネットワーク層 | 3 | ルーティング | IP, ICMP | ルータ | パケット || データリンク層 | 2 | 隣接ノード間通信 | Ethernet | スイッチ | フレーム || 物理層 | 1 | 電気信号の伝送 | - | リピータ | ビット || OSI層 | 層番号 | 役割 | プロトコル例 | 機器例 | PDU名 |
|---|---|---|---|---|---|
| アプリケーション層 | 7 | アプリケーション間通信 | HTTP, FTP, SMTP | - | データ |
| プレゼンテーション層 | 6 | データ形式の変換 | SSL/TLS, JPEG | - | データ |
| セッション層 | 5 | 通信の開始・終了管理 | NetBIOS | - | データ |
| トランスポート層 | 4 | 信頼性のある通信 | TCP, UDP | - | セグメント |
| ネットワーク層 | 3 | ルーティング | IP, ICMP | ルータ | パケット |
| データリンク層 | 2 | 隣接ノード間通信 | Ethernet | スイッチ | フレーム |
| 物理層 | 1 | 電気信号の伝送 | - | リピータ | ビット |
技術的な仕組み
Section titled “技術的な仕組み”この機能はrehypeプラグインとして実装されています。
Markdownがビルドされる際、すべての<table>要素が自動的にスクロール可能なラッパーで囲まれます。
左列固定はCSSのposition: stickyで実現しており、固定列の右側には薄い影が付いてスクロール可能なことが分かりやすくなっています。