HTMLの table で、td の中の文字が改行されずに横へはみ出ることがあります。
特に、長いURL、メールアドレス、商品コード、英数字の連続、HTMLメールの表組みなどで起こりやすいです。
この場合、br をたくさん入れるより、CSSで折り返し方を指定する方が管理しやすいです。
この記事では、td が改行されない原因と、CSSで折り返す方法を解説します。
tdの中で長い文字列が改行されない原因overflow-wrapを使って折り返す方法table-layout: fixed;の使い方white-space: nowrap;が原因の場合brで強制改行する場合- HTMLメールのtableで改行されないときの注意点
tdが改行されないときの早見表
まずは、症状ごとの原因と直し方を一覧で確認します。
| 症状 | よくある原因 | 直し方 |
|---|---|---|
| 長いURLがはみ出る | 途中で改行できる位置が少ない | overflow-wrap: anywhere; を指定する |
| 英数字の文字列が折り返されない | 1つの長い単語として扱われている | overflow-wrap や word-break を使う |
| どの列も幅が安定しない | tableが内容に合わせて幅を決めている | table-layout: fixed; を使う |
| まったく折り返されない | white-space: nowrap; が指定されている |
white-space: normal; に戻す |
| 決まった位置で改行したい | 自動折り返しではなく強制改行したい | br タグを使う |
基本のtableの書き方
まず、基本的な table は次のように書きます。
<table>
<thead>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>URL</td>
<td>https://example.com/very/long/path/that/does/not/wrap</td>
</tr>
</tbody>
</table>短い日本語であれば自然に折り返されることが多いですが、長いURLや英数字は折り返されず、セルの外にはみ出ることがあります。
この場合はCSSで折り返し方を指定します。
td内の長い文字列を折り返すCSS
長いURLや英数字を折り返したい場合は、td に overflow-wrap: anywhere; を指定します。
td {
overflow-wrap: anywhere;
}これで、通常は折り返しにくい長い文字列でも、必要に応じて途中で折り返せます。
テーブル全体に基本のスタイルをつけるなら、次のように書けます。
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
overflow-wrap: anywhere;
}overflow-wrap: anywhere; は、URLや長い英数字が親要素からはみ出るのを防ぎたいときに使いやすいです。
table-layout: fixedで列幅を安定させる
テーブルは、初期状態では内容に合わせて列幅を決めようとします。
そのため、長い文字列がある列だけ広がり、他の列が狭くなることがあります。
列幅を安定させたい場合は、table-layout: fixed; を使います。
table {
width: 100%;
table-layout: fixed;
}
td {
overflow-wrap: anywhere;
}table-layout: fixed; を指定すると、テーブルの幅をもとに列幅が決まりやすくなります。
そのうえで overflow-wrap を指定すると、長い文字列もセルの中で折り返しやすくなります。
white-space: nowrapが原因で改行されない場合
td がまったく改行されない場合は、どこかで white-space: nowrap; が指定されている可能性があります。
td {
white-space: nowrap;
}white-space: nowrap; は、テキストを1行で表示したいときに使うCSSです。
折り返したい場合は、white-space: normal; に戻します。
td {
white-space: normal;
overflow-wrap: anywhere;
}もし一部の列だけ折り返したくない場合は、クラスを分けて指定します。
<td class="nowrap">2026-07-07</td>
<td class="wrap">長い説明文が入ります。</td>.nowrap {
white-space: nowrap;
}
.wrap {
overflow-wrap: anywhere;
}word-breakを使う場合
overflow-wrap で十分なことが多いですが、さらに強く文字を分割して折り返したい場合は word-break を使うことがあります。
td {
word-break: break-word;
}また、英数字をかなり細かく折り返したい場合は、次のように書くこともあります。
td {
word-break: break-all;
}ただし、break-all は読みづらい位置で文字が切れることがあります。
まずは overflow-wrap: anywhere; を試して、それでもはみ出る場合に word-break を検討するとよいです。
brタグでtd内を強制改行する方法
決まった位置で改行したい場合は、td の中で br タグを使えます。
<td>
〒000-0000<br>
東京都〇〇区〇〇 1-2-3<br>
サンプルビル 5F
</td>住所や注釈のように、意味のある位置で改行したい場合には br が便利です。
一方、長いURLや英数字がはみ出る対策として、毎回手作業で br を入れるのは管理しにくいです。
その場合はCSSで折り返す方が向いています。
pタグをtdの中に入れてよいか
td の中に p タグを入れることはできます。
複数の段落をセルの中に入れたい場合は、次のように書けます。
<td>
<p>1つ目の説明文です。</p>
<p>2つ目の説明文です。</p>
</td>ただし、p にはブラウザやテーマ側のCSSで余白がついていることがあります。
セルの中で余白が大きすぎる場合は、CSSで調整します。
td p {
margin: 0 0 8px;
}単純にセルの中で1行だけ表示するなら、無理に p を入れなくても問題ありません。
スマホでtableがはみ出る場合
スマホでは、テーブルの列が多いと画面幅に収まらないことがあります。
その場合、無理にすべて折り返すより、横スクロールできるようにする方が見やすいこともあります。
<div class="table-scroll">
<table>
<!-- tableの内容 -->
</table>
</div>.table-scroll {
overflow-x: auto;
}
.table-scroll table {
min-width: 640px;
}データ量が多い表では、横スクロールの方が情報を保ちやすい場合があります。
説明文やURLが少し長いだけなら overflow-wrap、列数が多くてどうしても収まらないなら横スクロール、と分けて考えるとよいです。
HTMLメールのtableで改行されない場合
HTMLメールでは、レイアウトに table を使うことが多いです。
ただし、メールクライアントによってCSSの対応に差があるため、Webページより慎重に書く必要があります。
HTMLメールで確実に改行したい場所がある場合は、br を使うのがシンプルです。
<td style="padding: 16px; line-height: 1.8;">
こんにちは。<br>
お知らせの本文です。<br>
詳細をご確認ください。
</td>CSSを使う場合は、インラインCSSとして書く方が反映されやすいです。
<td style="overflow-wrap: break-word; word-break: break-word;">
https://example.com/very/long/path/that/does/not/wrap
</td>HTMLメールでは、最新のCSSがすべて同じように効くとは限らないため、できるだけシンプルなHTMLとCSSにするのがおすすめです。
まとめ
td の中で改行されない場合は、長い文字列、テーブルの幅、CSSの white-space を確認します。
この記事のポイントをまとめると、次のようになります。
- 長いURLや英数字は
tdの中ではみ出ることがある - まずは
overflow-wrap: anywhere;を指定する - 列幅を安定させたい場合は
table-layout: fixed;を使う white-space: nowrap;があると折り返されにくい- 決まった位置で改行したい場合は
brを使う - スマホで列数が多い表は横スクロールも検討する
- HTMLメールではシンプルなtableとインラインCSSを使う
HTML全体の改行の考え方は、HTMLで改行されない原因と直し方 も参考にしてみてください。
関連記事
- HTMLで改行されない原因と直し方｜br・p・pre・white-spaceの使い分け
- インライン要素とブロック要素の違い｜div・span・pの改行をCSSで制御する方法
- HTMLタグの使い分け｜div・p・span・h1〜h3・asideを初心者向けに解説
- レスポンシブウェブデザインにするためのCSSの使い方