ココカラハジメヨウ ウェブ、投資、美容、インビザライン

ウェブ

2021.05.10CSS

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

スマホの時に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;
}