【CSS】TABLEのセルの中でURLが改行してくれない

Tweet

Category css, html5 2011/12/22

問題

HTMLのtableの中のあるセル（td要素）内に、長いURLが入ると、突っ張り棒のようにそのセルの横幅が大きくなってしまう。

word-wrap:break-word;も効いてくれないみたい。

テーブルのセルの幅を調整したいんだけど、Javascriptでも使わないとだめ？

TDの中で折り返してもらうには、どうするといい？

解答例

ここまでやれば、たぶん期待した表示になる。

１、table要素に、幅（width）を指定する。
２、td要素にもcol要素か何かで、pxでも%でもよいから、幅（width）を指定する。
３、table要素に、CSSで table-layout:fixed する。
４、td要素（もしくはその中の問題の要素）に、CSSで word-wrap:break-word する。

以下、表示例をいくつか。

１、２だけだと長い単語とみなされたものが突っ張り棒状態になる

IEでは幅の指定なんて無視されてるような感じ。

Firefoxではやりたいことにちょっと近づく。URLだとスラッシュがあることで1つの単語とみなされていないだけで、本当に長い単語が入るとテーブルは崩れる。

１、２、３、４までやれば、ようやくURLぐらいはセルに納めてくれる

１、２、３、４までやっても、本当に何十文字もある長い単語については、単語が枠をはみ出る

通常ありえないですけどね。でもレイアウトは崩さないでがんばってくれてる感じです。

まとめ

ここまでやれば、たぶん言うことをきいてくれる。

<div style="width:500px; border:1px solid #cc0000;">
	<table border="1" style="table-layout:fixed;width:100%;">
		<colgroup>
			<col style="width:33%;">
			<col style="width:33%;">
			<col style="width:33%;">
		</colgroup>
		<tbody>
			<tr><td>テストテーブル</td><td>長い単語のテストです</td><td>This is TEST.</td></tr>
			<tr><td style="word-wrap:break-word;">https://www.softel.co.jp/blogs/tech/</td><td>URL 長い単語は</td><td>ブラウザによって表示が違います</td></tr>
			<tr><td>↑ td要素に style="word-wrap:break-word;" しました</td><td>表示テスト表示テスト</td><td>TEST TEST TEST</td></tr>
		</tbody>
	</table>
</div>