ビューアーで試す →

Markdownの表の幅・列幅を調整する方法

「列の幅が狭すぎて読みにくい」「1つの列だけ無駄に広い」「ハイフンを増やしても幅が変わらない」— Markdown（マークダウン）の表の幅は標準記法では指定できません。だからこそ調整にはコツがあります。このページでは、CSSが使える場合・使えない場合それぞれの調整方法をまとめました。仕上がりは無料のMarkdownビューアーで確認しながら進められます。

環境別・幅調整の方法まとめ
やりたいことCSSが使える環境（ブログ等）CSSが使えない環境（GitHub等）
列幅を指定するth:nth-child(n) に width不可（内容量で間接的に調整）
表全体を広げるtable { width: 100% }不可（自動）
折り返しを防ぐwhite-space: nowrap  で空白を置換
強制的に折り返すword-break 系<br> を手動で入れる

大前提：Markdownの表の幅は「内容」で決まる

Markdownの表はHTMLの <table> に変換され、各列の幅はブラウザがセルの内容量に応じて自動計算します。つまり「記法で幅を指定する」という発想自体がMarkdownにはなく、幅を制御したければ次の2択になります。

よくある誤解：ハイフンの数と列幅

区切り行の --- を ---------- に増やしても、表示上の列幅は1ミリも変わりません。ハイフンは1本以上あれば同じ意味で、幅の情報としては扱われないためです。

この2つは表示結果が完全に同じ
| 名前 | 説明 |
| --- | --- |
| A | 短い |

| 名前 | 説明 |
| ---------- | -------------------- |
| A | 短い |
表示結果（どちらも）
名前説明
A短い
ハイフンの数を増やす意味があるのは「ソースコードとしての見やすさ」だけです。エディタ上でパイプの位置を揃えると差分レビューがしやすくなるため、チーム開発では整形ツールで揃えるのが一般的です。

CSSが使える環境での列幅指定

はてなブログ・WordPress・自作サイトなど、CSSを書ける環境なら確実に制御できます。列は nth-child で指定します。

CSS例：1列目を120px、2列目を残り全部に
table {
  width: 100%;
}
th:nth-child(1), td:nth-child(1) {
  width: 120px;
  white-space: nowrap;
}
ポイント
  • table { width: 100% } で表を記事幅いっぱいに
  • 幅を固定したい列に width ＋ nowrap
  • 厳密に固定したいときは table-layout: fixed を追加

table-layout: fixed を指定すると、内容量に関係なく指定幅どおりに列が固定されます（はみ出す内容は折り返し）。レイアウトが暴れる表にはこれが特効薬です。

Markdown Viewerでは、プレビューを見ながら本文や表のスタイルを調整して、そのまま「CSSコピー」でブログに持ち出せます。表のCSSを1から書くのが面倒な場合の下敷きに使ってください。

GitHubなどCSSが使えない環境のテクニック

GitHubのREADMEやIssueでは、セキュリティ上の理由で style 属性や <style> タグが無効化されるため、CSSでの幅指定はできません。その前提での現実的なテクニックがこちらです。

1. 見出しセルに長めのテキストを入れる

列幅は内容で決まるので、ヘッダーの文言を長くすればその列は広がります。「名前」→「プロジェクト名」のように意味を保ったまま長くするのが自然です。

2. ノーブレークスペースで最低幅を確保する

書き方
| 項目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | 説明 |
| --- | --- |
| A | ... |
効果

&nbsp;（ノーブレークスペース）は折り返されない空白として幅にカウントされるため、列の最低幅を実質的に指定できます。

3. 画像で幅を確保する

透明な画像を <img width="200"> で置いて幅を確保する古典的なハックもあります。GitHubは img の width 属性を許可しているため機能しますが、メンテナンス性は悪いので最後の手段です。

折り返しの制御（nowrap・強制改行）

折り返したくない（1行に収めたい）

逆に、好きな位置で折り返したい

セル内では通常の改行が使えないため、<br> タグで明示的に改行します。これはどの環境でも機能する最も確実な方法です。詳しくは表の書き方ガイドのセル内改行の節をご覧ください。

表の見た目、その場で調整しませんか？
プレビューを見ながらスタイルを調整して、ブログ用のCSSをワンクリックでコピーできます。

無料のMarkdownビューアーを開く

よくある質問

スマホで表がはみ出してしまいます

表自体を縮めるより、表を横スクロール可能なコンテナで包むのが定石です。CSSで overflow-x: auto を指定した div で表を囲むと、ページ全体を崩さずに表だけスクロールできます。

列ごとに寄せ（右寄せ・中央寄せ）は指定できますよね？

はい、寄せだけは標準記法でできます。区切り行を :---（左）・:---:（中央）・---:（右）にします。幅はできないが寄せはできる、と覚えてください。

Qiita・Zennでは幅指定できますか？

QiitaやZennも投稿内のCSS・style属性は基本的に無効です。GitHubと同じ「内容側の工夫」（ヘッダー文言・&nbsp;・br）で調整してください。

関連ガイド