HTML / CSS
【CSS】横スクロールできるテーブルの作り方とスクロールバーのカスタマイズ
・テーブルをスクロール可能にする
※このカスタマイズ方法はWebkitベースのブラウザ（Chrome、Safariなど）に有効です。
※FirefoxやiOSのSafariなど、他のブラウザでは異なる方法が必要な場合があります。
スクロールバーのカスタマイズ
CSS
.table__scrollbar {
overflow-x: auto;
display: block;
}
.table__scrollbar table {
margin-bottom: 10px;
}
.table__scrollbar th,
.table__scrollbar td {
white-space: nowrap;
}
/* スクロールバー全体を対象にする */
.table__scrollbar::-webkit-scrollbar {
width: 10px; /* スクロールバーの幅 */
height: 10px; /* スクロールバーの高さ */
}
/* スクロールバーの背景部分をカスタマイズ */
.table__scrollbar::-webkit-scrollbar-track {
background: #f1f1f1; /* スクロールバーの背景色 */
border-radius: 5px; /* 角丸にする */
}
/* スクロールバーの操作部分をカスタマイズ */
.table__scrollbar::-webkit-scrollbar-thumb {
background: #888; /* スクロールバーの操作部分の背景色 */
border-radius: 5px; /* 角丸にする */
}
/* スクロールバーの操作部分にホバーした時のスタイル */
.table__scrollbar::-webkit-scrollbar-thumb:hover {
background: #555; /* ホバー時のスクロールバーの操作部分の背景色 */
}
HTML