Markdownの表が崩れる・PDFではみ出す原因と対処法

Markdownの表がPDFではみ出すときの最短対処

PDFで表の右端が切れる場合は、CSSで文字を小さくする前に、次の順番で直します。

1. 長いURLを表示名付きリンクにし、長いコードや説明文を表の外へ出す
2. 優先度の低い列を削り、見出しを短くする
3. 横長の表だけ横向きにするか、意味のまとまりで表を分ける
4. 印刷プレビューと、保存したPDFの両方で右端と改ページを確認する

1ページを超える表へ「途中で改ページしない」を指定すると、大きな空白ができたり、表全体が次ページへ送られたりします。短い表だけに使い、長い表は分割するのが安全です。

表の記法と表示幅を分けて確認する

Markdownの表が崩れる問題には、大きく2種類あります。1つは表として認識されない「記法の問題」、もう1つは表にはなるもののHTMLやPDFの幅へ収まらない「レイアウトの問題」です。最初にどちらが起きているかを確認すると、修正箇所を絞れます。

基本の表は次の形です。

| 項目 | 担当 | 状態 |
|---|---|---|
| 設計 | 佐藤 | 完了 |
| 実装 | 鈴木 | 進行中 |

Markdownエディタの分割表示などを使い、入力と変換結果を並べて確認すると、区切り行や列数の間違いを見つけやすくなります。

原因1：区切り行がない、列数が合っていない

1行目の見出しと本文の間には、---を使った区切り行が必要です。区切り行がないと、単なる文字列として表示されることがあります。

各行の|の数もそろえます。セル内に|を文字として書きたい場合は、対応環境で\|のようにエスケープします。先頭と末尾の|は省略できる実装もありますが、共同編集では付ける形式に統一した方がミスを見つけやすくなります。

| コマンド | 意味 |
|---|---|
| A \| B | AまたはB |

原因2：利用環境が表記法に対応していない

表は標準的なMarkdownのすべてで共通ではなく、GFMなどの拡張として提供される場合があります。GitHubでは表示できても、別のCMSや古い変換ライブラリでは表にならないことがあります。

ツールやCMSの説明でGFMテーブルへの対応を確認します。対応していない環境へ渡す場合は、HTMLのtableを使う、箇条書きへ置き換える、CSVを別添するなど、読み手の環境に合う形式を選びます。

原因3：セル内の長い文字列が幅を押し広げる

URL、ファイルパス、長い英単語、改行のないコードは途中で折り返しにくく、表全体をページ外へ押し出します。どのセルが原因か分からない場合は、長い内容を一時的に短い文字へ置き換え、幅が戻るか確認します。

URLは表示名付きリンクにすると短くできます。

<!-- 長いURLをそのまま表示しない -->
[仕様書を開く](https://example.com/very/long/path/to/document)

コードや識別子を省略できない場合は、表の外に詳細を出してセルから参照させる方法も有効です。表は比較に必要な短い情報へ絞ると読みやすくなります。

原因4：列が多すぎる

A4縦のPDFに多数の列を入れると、1列あたりの幅が不足します。文字サイズを極端に小さくする前に、次の順で整理します。

1. 不要な列を削除する
2. 説明列を表の外へ移す
3. 1つの表を目的別に分割する
4. 見出しや値を短くする
5. 用紙を横向きにする

横スクロールできるHTMLでは許容できても、固定幅のPDFでは右側が切れることがあります。HTMLとPDFを両方配布する場合は、狭いPDFを基準に設計すると崩れにくくなります。

原因5：セル内の改行やHTMLタグ

GFMの表セル内で改行するときは<br>が使われることがあります。

| 項目 | 手順 |
|---|---|
| 確認 | ファイルを開く<br>内容を確認する |

ただし、HTMLを許可しない環境やサニタイザーを通す環境では<br>が削除されます。また、1セルへ何行も詰めると行の対応関係が分かりにくくなります。詳しくは表セルで改行する方法を参照してください。

PDFで途中から切れる場合

ページ末尾に表が置かれると、行の途中や不自然な位置で次ページへ送られる場合があります。短い表は「表の途中で改ページしない」設定が有効ですが、1ページより長い表は分割が避けられません。

長い表では見出し行が次ページでも分かるようにし、意味のまとまりで表自体を分けます。印刷前には、右端だけでなく最終行、罫線、セル内の画像やリンクも確認します。

崩れにくい表のチェックリスト

最初に行う3分診断

まず表だけを新しいMarkdownへコピーし、値を短い文字へ置き換えます。それでも表にならなければ記法またはGFM対応の問題です。短い値なら収まり、元の値へ戻すとはみ出す場合は、長いURL・コード・列数が原因です。表単体では正常で本文へ戻すと崩れる場合は、用紙余白や周囲のHTML、印刷倍率を確認します。

A4縦で読みやすい表へ直す順序

最初から文字を小さくすると、印刷できても読めないPDFになります。重要度の低い列を削除し、説明を表の下へ移し、表を意味のまとまりで分けてから文字サイズを調整します。各セルは比較に必要な語句へ絞り、段落が必要な内容は本文へ出してください。

短い表には印刷CSSのbreak-inside: avoidを使えますが、1ページを超える表は分割が必要です。改ページ前後で見出しや説明を補い、次ページの数値が何を表すか分かる状態にします。

• 見出しの下に---の区切り行がある
• すべての行で列数が一致している
• 長いURLを表示名付きリンクにした
• 長文やコードを表の外へ移した
• PDF向けに列数を減らした
• HTMLとPDFの両方をプレビューした
• 長い表を意味のまとまりで分割した

表は情報を詰め込む場所ではなく、項目を比較するための形式です。列と文章を減らすことが、CSSだけで直すより効果的な場合も多くあります。

スマートフォンでも読める表にする

HTMLはPDFより表示幅が変わりやすいため、PCで収まってもスマートフォンでは横スクロールが必要になることがあります。重要な列を左側へ置き、列見出しを短くします。カード形式へ切り替えるCSSもありますが、同じ情報を二重管理しない設計が必要です。

表の直前に「何を比較する表か」を一文で示し、表だけを見ても単位と基準時点が分かるようにします。数値列には単位を見出しへ書き、空欄とゼロを使い分けます。見た目の崩れを直すだけでなく、読み手が誤解しない構造になっているかも確認してください。列の右寄せ・中央寄せを含むテキスト配置全般は、Markdownで文字を中央寄せ・右寄せする方法で解説しています。

よくある質問（FAQ）

Q. GitHubでは表になるのに、他の環境では表示されないのはなぜですか

パイプ記法の表は、標準的なMarkdownの機能ではなくGFMの拡張として提供されることが多いためです。利用先のツールやCMSがGFMテーブルへ対応しているかを確認してください。対応していない場合は、許可されているHTMLのtableへ書き換える、箇条書きへ置き換える、データをCSVで別添するなど、読み手の環境で表示できる形式を選びます。

Q. 表の横スクロールは許容してよいですか

画面幅に合わせて表示が変わるHTMLでは選択肢になりますが、PDFは用紙の幅が固定で、スクロールに頼れません。HTMLとPDFの両方へ配布するなら、PDFの印刷可能な幅を基準に列数や見出しを設計し、そのうえでスマートフォンなど狭い画面でも同じ構成が読み取れるかを確認してください。