scroll-hint.jsを使ってテーブル（table）をスマホやタブレットで表示した時に横スクロール出来ることを表示する方法｜DAD UNION

scroll-hint.jsを使ってテーブル（table）をスマホやタブレットで表示した時に横スクロール出来ることを表示する方法をご紹介します。

Contents

テーブル（table）をスマホやタブレットで表示した時に横スクロール出来ることを表示するCSSの記述
テーブル（table）をスマホやタブレットで表示した時に横スクロール出来ることを表示するHTMLの記述
scroll-hint.jsを使ってテーブル（table）をスマホやタブレットで表示した時に横スクロール出来ることを表示するJavaScriptの記述
scroll-hint.jsを使ってテーブル（table）をスマホやタブレットで表示した時に横スクロール出来ることを表示するデモページ
ソース元：ScrollHint

テーブル（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>