過去にレスポンシブの「table」を紹介しましたが、今回はスマホによってレイアウトを変えるのではなく、そのままのレイアウトで横スクロールで表示する方法を紹介します。
列の項目が多く、横に長い「table」の場合は、無理に調整するのではなく、横スクロールにするのも有りだと思います。
その場合、横スクロールが出来る事を案内すると親切です。
「ScrollHint」は横スクロール出来る事を、アイコンとアニメーションを使って案内するライブラリです。
まずはデモページをご覧ください。
横スクロールになるように横幅を狭くしています。
それでは使い方を説明します。
まずはcssとjsファイルを読み込みます。CDNの場合は下記になります。
CDN
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
公式サイトからファイルをダウンロードする場合は、上部のダウンロードボタンをクリックでzipファイルがダウンロードできます。
公式サイト
https://appleple.github.io/scroll-hint/
ファイルを解凍した後、使うファイルはcssフォルダの「scroll-hint.css」とjsフォルダの「scroll-hint.js」です。
下記のように読み込みます。パスは任意で変更してください。
HTML
<script src="js/scroll-hint.js"></script>
オプションを含めた設置とHTMLは下記になります。
HTML
<table>
<thead>
<tr>
<th>1列目</th>
<th>2列目</th>
<th>3列目</th>
<th>4列目</th>
<th>5列目</th>
</tr>
</thead>
<tbody>
<tr>
<td>1列目のテキスト</td>
<td>2列目のテキスト</td>
<td>3列目のテキスト</td>
<td>4列目のテキスト</td>
<td>5列目のテキスト</td>
</tr>
<tr>
<td>1列目のテキスト</td>
<td>2列目のテキスト</td>
<td>3列目のテキスト</td>
<td>4列目のテキスト</td>
<td>5列目のテキスト</td>
</tr>
</tbody>
</table>
</div>
<script>
new ScrollHint('.table_container', {
suggestiveShadow: true,
remainingTime: 5000,
i18n: {
scrollable: 'スクロールできます'
}
});
</script>
デモページと違い行数は省いています。
HTMLはシンプルな「table」ですが、横スクロールの範囲を「div」で囲みます。class名は任意でOKです。
scriptの部分で、対象のclass名を指定します。
オプションの説明です。
・「suggestiveShadow」は影を表示するかしないかです。
・「remainingTime」はアイコンを非表示にするまでの時間です。
・「i18n」は表示する文言です。
「table」に限らず使えるので、横幅がはみ出してしまうような場合に使えるのではないでしょうか。
デモページのファイル一式をご希望の方は、下記よりダウンロードしてください。
【 css45.zip（7KB） 】