【HTML/CSS】tableの横幅を指定してもレイアウトが広がってしまう時の対応方法

table(テーブルタグ)に限らず、ブロック要素タグ内で、
スペースを含まない半角英数字が連続して含まれる文字列を使った場合、
文字列全体を英単語や数字と認識して、文字列が途中で折り返されない為、テーブルが横に広がってしまう。
こういった問題の対応方法

テーブル横幅が広がる

【元ソースコード】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>title</title>
<style>
td{
	width: 100px;
	height: 40px;
	background: #777777;
	border: 1px solid #000000;
}
</style>
</head>
<body>
<table>
	<tr>
		<td class="box"><a href="#">ああああああああああ</a></td>
		<td class="box"><a href="#">aaaaaaaaaaaaaaaaaaaa</a></td>
		<td class="box"><a href="#">ああああああああああ</a></td>
		<td class="box"><a href="#">aaaaaaaaaaaaaaaaaaaa</a></td>
	</tr>
</table>
</body>
</html>

IEのみであれば下記のコードを追加すれば解決する

/*IEのみ*/
word-wrap: break-word;

現状のブラウザではこの問題を解決する方法はないので、
レイアウト重視の場合、tableの横幅を固定する事で対応する。

具体的にはtableタグのthやtdに横幅を指定。
その中の文字列にも横幅を指定する。
文字列に横幅を指定しても半角英数字は改行してくれないので、
overflow:hiddenで指定横幅以上は表示しないという方法で対応する。

テーブル横幅固定

【改ソースコード】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>tableの横幅を固定</title>
<style>
td{
	width: 100px;
	height: 40px;
	background: #777777;
	border: 1px solid #000000;
	word-wrap: break-word; /*IEのみ*/
}
td.box a{
	display: block;
	width: 100px;
	overflow:hidden;
}
</style>
</head>
<body>
<table>
	<tr>
		<td class="box"><a href="#">ああああああああああ</a></td>
		<td class="box"><a href="#">aaaaaaaaaaaaaaaaaaaa</a></td>
		<td class="box"><a href="#">ああああああああああ</a></td>
		<td class="box"><a href="#">aaaaaaaaaaaaaaaaaaaa</a></td>
	</tr>
</table>
</body>
</html>

aタグ、spanタグなどインライン要素を使った時は、display: block;を忘れずに!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>