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

table要素の

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <script type="text/javascript">
    var mojiRetu10 = new String("1234567890");
    var mojiRetu20 = String("12345678901234567890");
    var mojiRetu40 = "1234567890123456789012345678901234567890";
    </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>
カテゴリー: Javascript パーマリンク