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;
}