MENU

スマホの時に横スクロールさせる

スマホの時にtableをスクロールさせる

 

  <div class="scroll">
  <table>
    <tr>
      <td>テキストテキスト</td>
      <td>テキストテキストテキスト</td>
    </tr>
    <tr>
      <td>テキストテキスト</td>
      <td>テキストテキストテキスト</td>
    </tr>
  </table>
  </div>

 

.scroll {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
/*スクロールバー全体の高さ*/
.scroll::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー(マウスオーバー)*/
.scroll::-webkit-scrollbar-thumb:hover {
  background: #999;
}
.scroll table {
  width: 100%;
  min-width: 590px;
	letter-spacing: 0;
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

40代webクリエイター
1人が好き、家が好き、副業と投資でお金貯めてます
31歳で貯金200万円、41歳で2000万円、43歳で2400万円達成中

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次