CSS テーブルのセル内の文字列の折り返しの制御を行う方法
テーブルのセル内の文字列の折り返しの制御を行う方法を紹介します。
以下は、セルの幅を200pxに指定しているのですが、半角英数字の長い文字列があると、セルの幅を無視してセルが伸びてしまいます。
テーブルのレイアウトが崩れてしまうときなどはこの設定が原因なケースが多いです。
<table border="1">
<colgroup span="2" style="width: 200px;">
<tr>
<td>あいうえおあいうえおあいうえおあいうえお</td>
<td>1234567890123456789012345678901234567890</td>
</tr>
</table>半角英数字の文字列もセルの幅に合わせて折り返し表示をしたい場合はword-breakのスタイルを設定します。
- normal（デフォルト）
- 全角は折り返し、半角は折り返さない
- break-all
- 全角も半角も折り返す
- keep-all
- 全角も半角も折り返さない
セル要素（td）にこのスタイルを指定します。
break-all
break-allを指定すると、すべての文字列が幅に合わせて折り返して表示されるようになります。
<table border="1">
<colgroup span="2" style="width: 200px;">
<tr>
<td style="word-break: break-all;">あいうえおあいうえおあいうえおあいうえお</td>
<td style="word-break: break-all;">1234567890123456789012345678901234567890</td>
</tr>
</table>keep-all
keep-allを指定すると、文字列は改行されなくなります。
<table border="1">
<colgroup span="2" style="width: 200px;">
<tr>
<td style="word-break: keep-all;">あいうえおあいうえおあいうえおあいうえお</td>
<td style="word-break: keep-all;">1234567890123456789012345678901234567890</td>
</tr>
</table>