HTML5 – 大きなテーブルのスクロール

1 横幅が長いテーブルの表示
2 横スクロール

横幅が長いテーブルの表示

セルの内容が連続した長いASCII文字列の場合、それが一つのワードとみなされて改行されず、表が横に伸びて表示が乱れる。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc

通常の英文の場合は、表示領域の幅に合わせてワード境界で自動改行される。

The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo

マルチバイト文字の場合は、各文字がワード扱いになり、任意の位置で自動改行される。

いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは

横スクロール

基本形

切れ目のないASCII文字列を画面幅に合わせて横スクロールさせたい場合。

<div style="overflow: auto;">
<table>
<tbody>
.....
</tbody>
</table>
</div>

<table>

<tbody>

.....

</tbody>

</table>

</div>

実行例

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc

自動改行の抑止

英文やマルチバイト文字列の場合、スクロール表示させようとしても、自動改行されて常に表示領域に収まるように表の幅が調整されるので、スクロールが効かない。

そこで空白(ワード境界)での改行を抑止させると、折り返されずに票の横幅が長くなり、横スクロールの対象となる。

<div style="white-space: nowrap; overflow: auto;">
<table>
<tbody>
.....
</tbody>
</table>
</div>

<table>

<tbody>

.....

</tbody>

</table>

</div>

実行例：英文

The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo

実行例：和文

いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは

表幅の固定

自動改行の抑止では、一文が一行となって表の幅が広すぎる。適当なところで折り返したい場合には、表やセルの幅を指定するとよい。

幅指定の際は、ピクセルやセンチ／インチなどのデバイス依存単位より、emなどの文字相当の単位がよい。

<div style="overflow: auto;">
<table style="width: 50em;">
<tbody>
.....
</tbody>
</table>
</div>

<tbody>

.....

</tbody>

</table>

</div>

実行例：英文

The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain	Daisy, Daisy, Give me your answer do!	Salagadoola mechicka boola bibbidi-bobbidi-boo

実行例：和文

いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい	ろろろろろろろろろろろろろろろろろろろろ	はははははははははははははははははははは

幅と高さの指定

幅と高さをピクセル単位で指定した例。

<div style="height: 400px; width: 300px; overflow: scroll;">
<table>
<tbody>
.....
</tbody>
</table>
</div>

<table>

<tbody>

.....

</tbody>

</table>

</div>

実行例

aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa	bbbbbbbbbbbbbbb	ccccccccccccccc	ddddddddddddddd	eeeeeeeeeeeeeee

TauStation

HTML5 – 大きなテーブルのスクロール

横幅が長いテーブルの表示

横スクロール

基本形

自動改行の抑止

表幅の固定

幅と高さの指定

コメントを残すコメントをキャンセル

横幅が長いテーブルの表示

横スクロール

基本形

自動改行の抑止

表幅の固定

幅と高さの指定

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル