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

実装サンプル

https://www.s-contigo.website/admin/page

参考サイト

https://ponhiro.com/fixed-scroll-table/