スマホ表示時にテーブル（table）を横スクロールさせる。

基本のHTMLとCSS

tableをdivタグで囲う

<div class="table_scroll_wrap">
<table>
-----
</table>
</div>

table内で改行させないようにして、divタグに横スクロールのプロパティを書く。

.table_scroll_wrap{overflow-x: auto;}
.table_scroll_wrap table{width:100%;white-space: nowrap;}

横スクロールをわかりやすくする「ScrollHint」

横スクロールをわかりやすくするためのjQueryライブラリ「ScrollHint」を実装する場合のメモ。デモは途中。。。

配布元：https://www.appleple.com/blog/oss/scroll-hint.html

<div class="js-scrollable table_scroll_wrap">
<table>
-----
</table>
</div>

window.addEventListener('DOMContentLoaded', function(){
  new ScrollHint('.js-scrollable', {
  scrollHintIconAppendClass: 'scroll-hint-icon-white', // white-icon will appear
  i18n: {
    scrollable: 'スクロールできます'
  }
});
});

デモ