scrollhint テーブルの横スクロール
まずは実装サンプルを確認
100cm | 110cm | 120cm | 130cm | 140cm | 150cm | 160cm | Sサイズ | Mサイズ | Lサイズ | XLサイズ | 3Lサイズ | 4Lサイズ | 5Lサイズ | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
シャツの着丈 全身ぐるりのサイズ 実寸平置き | 35.5cm | 39cm | 42.5cm | 45cm | 48.5cm | 52cm | 55cm | 57cm | 59cm | 61cm | 63cm | 66cm | 68cm | 69.5cm |
シャツの身幅 全身ぐるりのサイズ 実寸平置き | 31cm | 33.5cm | 36cm | 38.5cm | 41cm | 43.5cm | 46cm | 48cm | 50cm | 52cm | 53.5cm | 55cm | 56.5cm | 58cm |
シャツの半袖丈 | 22.5cm | 24cm | 25.5cm | 27cm | 28.5cm | 30cm | 31.5cm | 33cm | 34cm | 35.5cm | 37cm | 39cm | 40.5cm | 42cm |
シャツの長袖丈 | 48cm | 52cm | 55cm | 59cm | 63cm | 67cm | 71cm | 74cm | 76cm | 78cm | 80cm | 81.5cm | 83cm | 84.5cm |
HTML
scrollhint テーブルの横スクロールを入れたい箇所に以下のソースを張り付け、適宜内容を修正する。tableタグの前後に<div class="scroll">を入れる
<div class="scroll"> <table> <caption>シャツ</caption> <thead> <tr> <th></th> <th>100cm</th> <th>110cm</th> <th>120cm</th> <th>130cm</th> <th>140cm</th> <th>150cm</th> <th>160cm</th> <th>Sサイズ</th> <th>Mサイズ</th> <th>Lサイズ</th> <th>XLサイズ</th> <th>3Lサイズ</th> <th>4Lサイズ</th> <th>5Lサイズ</th> </tr> </thead> <tbody> <tr> <td>シャツの着丈 全身ぐるりのサイズ 実寸平置き</td> <td>35.5cm</td> <td>39cm</td> <td>42.5cm</td> <td>45cm</td> <td>48.5cm</td> <td>52cm</td> <td>55cm</td> <td>57cm</td> <td>59cm</td> <td>61cm</td> <td>63cm</td> <td>66cm</td> <td>68cm</td> <td>69.5cm</td> </tr> <tr> <td>シャツの身幅 全身ぐるりのサイズ 実寸平置き</td> <td>31cm</td> <td>33.5cm</td> <td>36cm</td> <td>38.5cm</td> <td>41cm</td> <td>43.5cm</td> <td>46cm</td> <td>48cm</td> <td>50cm</td> <td>52cm</td> <td>53.5cm</td> <td>55cm</td> <td>56.5cm</td> <td>58cm</td> </tr> <tr> <td>シャツの半袖丈</td> <td>22.5cm</td> <td>24cm</td> <td>25.5cm</td> <td>27cm</td> <td>28.5cm</td> <td>30cm</td> <td>31.5cm</td> <td>33cm</td> <td>34cm</td> <td>35.5cm</td> <td>37cm</td> <td>39cm</td> <td>40.5cm</td> <td>42cm</td> </tr> <tr> <td>シャツの長袖丈</td> <td>48cm</td> <td>52cm</td> <td>55cm</td> <td>59cm</td> <td>63cm</td> <td>67cm</td> <td>71cm</td> <td>74cm</td> <td>76cm</td> <td>78cm</td> <td>80cm</td> <td>81.5cm</td> <td>83cm</td> <td>84.5cm</td> </tr> </tbody> </table> </div>
js + cssの追加
footerに以下のソースを追加して、js + cssを読み込む
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css"> <script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script> {literal} <script> window.addEventListener('DOMContentLoaded', function(){ new ScrollHint('div.scroll table', { remainingTime: 5000, i18n: { scrollable: '横スクロールできます' } }); }); </script> {/literal}
cssの変更
スマホorタブレットのcssに追記
div.scroll table{ word-break: break-all; table-layout: fixed; display:block; max-height: 80vh; min-height: 120px; } div.scroll thead th { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; text-align:center; } div.scroll thead th:first-child { position: -webkit-sticky; position: sticky; top: 0; left: 0; z-index: 3; } div.scroll td:first-child{ position: -webkit-sticky; position: sticky; left: 0; z-index: 2; border:none; white-space: normal; min-width: 80px; line-height: 1.2; } div.scroll th, div.scroll td { position: relative; border: none; z-index: 0; vertical-align: middle; } div.scroll tr{ border-bottom:none !important; } div.scroll th::before, div.scroll td::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; z-index: -1; } div.scroll th::before{ border-top: 1px solid #dedede; z-index: -1; } div.scroll tr:first-child th:first-child::before, div.scroll tr td:first-child::before{ border-left: 1px solid #dedede; z-index: -1; }