横にはみ出す表

2023年12月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は（特にスマホ時に）表が横長になって画面からはみ出す時に横スクロールで表示させる方法について調べました。

横に長い表

参考：Quiita｜はみ出たtableを横スクロールで滑らかに表示するCSS

参考：株式会社RETVAL｜【HTML/CSS】横スクロールできる表（テーブル）の作り方

まずは表を用意しましょう。

例として、メインテートの添付文書の効能・効果の表を使ってみます。

<table class="table">
  <tr>
    <th>効能・効果</th>
    <td>メインテート錠0.625mg</td>
    <td>メインテート錠2.5mg</td>
    <td>メインテート錠5mg</td>
  </tr>
  <tr>
    <th>本態性高血圧症（軽症～中等症）</th>
    <td>－</td>
    <td>〇</td>
    <td>〇</td>
  </tr>
  <tr>
    <th>狭心症</th>
    <td>－</td>
    <td>〇</td>
    <td>〇</td>
  </tr>
  <tr>
    <th>心室性期外収縮</th>
    <td>－</td>
    <td>〇</td>
    <td>〇</td>
  </tr>
  <tr>
    <th>虚血性心疾患又は拡張型心筋症に基づく慢性心不全</th>
    <td>〇</td>
    <td>〇</td>
    <td>〇</td>
  </tr>
  <tr>
    <th>頻脈性心房細動</th>
    <td>－</td>
    <td>〇</td>
    <td>〇</td>
  </tr>
</table>

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  border: 2px solid #eee;
  padding: 4px 8px;
}
  
.table td {
  text-align: center;
}

パソコンだとまあ見られなくもないんですが、スマホ（縦）だと見づらいですね。

テキストを改行させないためにwhite-space:nowrapを追加します。

表を<div>で囲ってクラスをtable-wrapとして、overflow-x:autoを指定します。

<div class="table-wrap">
  <table>
    <tr>
      <th class="text-center">効能・効果</th>
      <td>メインテート錠0.625mg</td>
      <td>メインテート錠2.5mg</td>
      <td>メインテート錠5mg</td>
    </tr>
        ・
        ・
        ・
  </table>
</div>

.table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.table th,
.table td {
  border: 2px solid #eee;
  padding: 4px 8px;
}
  
.table td {
  text-align: center;
}

横にスクロールするとはみ出した部分が見えるようになりました。

ScrollHint

参考：ScrollHint

表が横にスクロールできることが一目でわかるような「ScrollHint」というプラグインがあるようです。早速実装してみましょう。

まずはcssとjsを上記のサイトからダウンロードするか、CDNで読み込みます。

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>

スクリプトを記述します。

new ScrollHint('.js-scrollable');

さっきの表にjs-scrollableというクラスを追加します。

<div class="table-wrap js-scrollable">
  <table>
    <tr>
      <th class="text-center">効能・効果</th>
      <td>メインテート錠0.625mg</td>
      <td>メインテート錠2.5mg</td>
      <td>メインテート錠5mg</td>
    </tr>
        ・
        ・
        ・
  </table>
</div>

スクリプトを以下のようにするとテキストを変更できるようです。

new ScrollHint('.js-scrollable', {
  i18n: {
    scrollable: 'スクロールできます'
  }
});

まとめ

これはわかりやすいなあ。でも1回スクロールすると消えてしまいますね。

スマホ時だけScrollHintを表示させるようにしたいですね。