【CSS】テーブル内の文字列を簡単に折り返す方法

通常テーブルは各列の幅を勝手に計算してくれるので折り返す必要はありません。

ですが特殊な条件だとテーブル要素内のテキストを折り返ししないといけない場面が出てきます。

ということでCSSを使ってテーブル内の文字列を折り返す方法について紹介

このページの目次

文字列の折り返しが必要になる場面
td要素で文字列を折り返しする方法
ここまでのまとめ

文字列の折り返しが必要になる場面

テーブル内で文字列を折り返ししないといけない場面・・・

それはテーブルの幅をtable-layoutプロパティを使って固定している場合です。

そのやり方については次の記事でも解説しました。

PisukeCode - Web開発まとめ

【CSS】テーブルの各列の幅を均等にする方法

https://pisuke-code.com/css-equalize-table-column-width

テーブルを使っていると列の幅の指定に悩むことがあるんですよね。最近も列幅を均等にしたいけどやり方が分からなくてかなり悩みました。ですがその方法が分かったのでCSSで各列の幅を均等にする方法を紹介します。テーブルの列幅はtd要素の最大幅で決まるまずテーブルで列幅を均等にしようとしたときに理解しないといけないことがあります。それはテーブルは各列の最大幅を一番大きいtd要素に合わせるということ例えば次のようなテーブルがあるとしましょう。<table border="1" style="width: 300px;"&a...

例えば次のようなテーブルを作成したとしましょう。

<table class="equal_table" border="1">
  <tr>
    <td>AB</td>
    <td>ABCDEFABCDEF</td>
    <td>ABCD</td>
  </tr>
  <tr>
    <td>ABCDEF</td>
    <td>ABC</td>
    <td>AB</td>
  </tr>
</table>

<tr>

<td>ABCDEFABCDEF</td>

</tr>

<tr>

<td>ABCDEF</td>

</tr>

</table>

equal_table というクラス名を持つテーブルです。

このテーブル幅を固定しているのが次のCSS

.equal_table{
  table-layout: fixed;
  width: 300px;
}

.equal_table{

table-layout: fixed;

width: 300px;

}

table-layout: fixed; をテーブルに指定することで幅が固定になります。

このCSS例だとテーブル幅が常に300pxで固定されるので、それぞれの列幅は100pxになるということ

それで何が問題かというと次のCodePenを見てください。

See the Pen 【CSS】テーブル内のテキストがはみ出てしまう例 by ぴー助 (@pisuke-code) on CodePen.

見れば分かるように１行目２列目のtd要素の文字列がはみ出てしまっています。

こういう風にテーブル幅が固定されている場合にtd要素内での文字列の折り返しが必要になるんです。

ではどうやって折り返しするかですが、あるCSSプロパティを使えば簡単です。

td要素で文字列を折り返しする方法

td要素で文字列の折り返しするにはどうすればいいか・・・

その答えはtd要素に対して word-wrap: break-word; を指定するだけです。

例えば先ほどの例に出したテーブルなら次のようなCSSを適用するだけ

.equal_table td{
  word-wrap: break-word;
}

.equal_table td{

word-wrap: break-word;

}

たったこれだけです。

実際にどのようなテーブルの見た目になるかは次のCodePenを見てください。

See the Pen 【CSS】テーブル内のテキストを折り返す方法 by ぴー助 (@pisuke-code) on CodePen.

１行目２列目のtd要素が列幅に収まるように途中で改行されています。

ちなみに word-wrap の取れる値には normal と break-word の２種類があります。

その２つの違いはそれぞれ次の通り

normal
単語の途中だと改行しない。必要に応じて幅が変わる
break-word
単語の途中でも気にせずに改行する

td要素の折り返しに normal を使わないのは単語単位で改行をしてしまうからです。

単語単位ではなく文字単位で改行をするには break-word を使うのが正しいですね。

ここまでのまとめ

ここまでのことを簡単にまとめてみると次の通り

テーブルで文字列の折り返しが必要になる場合がある
例えば table-layout: fixed; を指定してテーブル幅を固定している場合など
文字列の折り返しにはword-wrapを指定
td要素に対して word-wrap: break-word; のように指定
ただし word-wrap: normal; だと単語単位で折り返されてしまうので注意！