tableへの最大表示文字列の設定

table要素の

、

タグの横幅指定はピクセルか％指定なので、表示文字列の大きさによって行数が自動拡張されます。
しかし、制限なく自動拡張されると表の行数が1ページの収まらなくなる(特にタブレットやスマフォでは）ので、表示文字列の数を元に表示をスキップ数又は行に入りきらない文字を切り落とす、などの処理が必要になります。

文字列の長さを判断して表示を制御する例

<!DOCTYPE html>
<html lang="UTF-8">
<head>
	<script type="text/javascript">
	var mojiRetu10 = new String("１２３４５６７８９０");
	var mojiRetu20 = String("１２３４５６７８９０１２３４５６７８９０");
	var mojiRetu40 = "１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０";
	</script>
</head>
<body>
	<script type="text/javascript">
	alert("mojiRetu10：" + mojiRetu10 + "   文字数:" + mojiRetu10.length + 
			"\nmojiRetu20：" + mojiRetu20 + "   文字数:" + mojiRetu20.length + 
			"\nmojiRetu40：" + mojiRetu40 + "   文字数:" + mojiRetu40.length);

	</script>
<table border="1" cellspacing="0" cellpadding="5"  align="left" bordercolor="#000000" width="200">
<tr>
<td>
	<script type="text/javascript">
	if(mojiRetu10.length <= 34) { document.write(mojiRetu10); }
	</script>
</td>
</tr>
<tr>
<td>
	<script type="text/javascript">
	if(mojiRetu20.length <= 34) { document.write(mojiRetu20); }
	</script>
</td>
</tr>
<tr>
<td>
	<script type="text/javascript">
	if(mojiRetu40.length <= 34) { 
		document.write(mojiRetu40);
	} else {
		document.write("mojiRetu40は" + mojiRetu40.length + "文字の為、2行では表示できません。");
	}
	</script>
</td>
</tr>
</table>
</body>
</html>

tableへの最大表示文字列の設定

カテゴリー