scroll-hint.jsを使ってテーブル(table)をスマホやタブレットで表示した時に横スクロール出来ることを表示する方法をご紹介します。
Contents
ディスプレイ広告
テーブル(table)をスマホやタブレットで表示した時に横スクロール出来ることを表示するCSSの記述
※scroll-hint.cssファイルを読み込みます。その他テーブル(.table、.table td,.table th)のCSSを記述します。必要に応じて変更して下さい。
<link rel="stylesheet" href="scroll-hint.css"> <style> body { font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 18px; line-height: 1.6em; padding-top: 20px; } p{ font-size: 16px; padding: 20px 0; } .table { width: 900px; margin-bottom: 1rem; border-collapse: collapse; background-color: transparent; margin: 0 auto; } .table td,.table th { border:1px solid #ccc; padding: 20px; } </style>
テーブル(table)をスマホやタブレットで表示した時に横スクロール出来ることを表示するHTMLの記述
※class=”js-scrollable”のdivタグの子要素にテーブル(table class=”table”)を用意します。
<h1>scroll-hint.jsを使ってテーブル(table)をスマホやタブレットで表示した時に横スクロール出来ることを表示します。<br></h1> <p>本ページをスマホかタブレット端末で見るか、chromeのデベロッパーツールでスマホ端末表示してみて下さい。<br>ブラウザ幅を900px以下にしても「スクロールできます」メッセージが表示されます。</p> <div class="js-scrollable"> <table class="table"> <tbody> <tr> <th>番号</th> <th>名前</th> <th>生年月日</th> <th>住所(都道府県)</th> </tr> <tr> <td>A001</td> <td>東京一郎</td> <td>1981年11月22日</td> <td>東京都</td> </tr> <tr> <td>A002</td> <td>東京二郎</td> <td>1982年12月23日</td> <td>東京都</td> </tr> <tr> <td>A003</td> <td>東京三郎</td> <td>1983年01月04日</td> <td>東京都</td> </tr> <tr> <td>A004</td> <td>東京四郎</td> <td>1984年02月05日</td> <td>東京都</td> </tr> <tr> <td>A005</td> <td>東京五郎</td> <td>1985年03月06日</td> <td>東京都</td> </tr> <tr> <td>A006</td> <td>東京六郎</td> <td>1986年04月07日</td> <td>東京都</td> </tr> </tbody> </table> </div>
scroll-hint.jsを使ってテーブル(table)をスマホやタブレットで表示した時に横スクロール出来ることを表示するJavaScriptの記述
※scroll-hint.jsファイルを読み込みます。new ScrollHint(‘横スクロール表示エリア’, {オプション})を記述します。オプションでは横スクロール可能メッセージや色を設定できます。
<script src="scroll-hint.js"></script> <script> new ScrollHint('.js-scrollable', { scrollHintIconAppendClass: 'scroll-hint-icon-white', applyToParents: true, i18n: { scrollable: 'スクロールできます' } }); </script>
scroll-hint.jsを使ってテーブル(table)をスマホやタブレットで表示した時に横スクロール出来ることを表示するデモページ
scroll-hint.jsを使ってテーブル(table)をスマホやタブレットで表示した時に横スクロール出来ることを表示するデモページ
ソース元:ScrollHint
ScrollHint
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。