SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

問題

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

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

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

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

解答例

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

1、table要素に、幅(width)を指定する。
2、td要素にもcol要素か何かで、pxでも%でもよいから、幅(width)を指定する。
3、table要素に、CSSで table-layout:fixed する。
4、td要素(もしくはその中の問題の要素)に、CSSで word-wrap:break-word する。

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

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

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

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

1、2、3、4までやれば、ようやくURLぐらいはセルに納めてくれる

1、2、3、4までやっても、本当に何十文字もある長い単語については、単語が枠をはみ出る

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

まとめ

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

<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>

関連するメモ

コメント(1)

天秤? 2014年10月27日 09:56

word-break: break-all;