⚠この記事が公開されたのは 2021年11月17日で、内容が古く、間違っている可能性があります。
スマートフォンで画面外までoverflowさせて横スクロールできるtableを実装することがあります。
その際にtable上にスクロールのアイコンを表示させてスクロール可能なことを知らせることができるScrollHintという便利なライブラリがあり、よく利用させていただいています。
See the Pen ScrollHint-multipletable-Success by 本田類二 (@curledtail_h) on CodePen.
しかし複数のtableがありそれらのに全てScrollHintを適用した際に一部のtableでScrollHintのアイコンが表示されなくなるという現象がありました。
例えば以下のコードでは1番目のテーブルでScrollHintが動作しません。
<div class="js-scrollable">
<table class="table text-nowrap">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">河川名</th>
<th scope="col">延長(km)</th>
<th scope="col">河口・合流地</th>
<th scope="col">流出先</th>
<th scope="col">管理所轄</th>
<th scope="col">河川指定区分・本支川</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>信濃川</td>
<td>367</td>
<td>新潟県</td>
<td>日本海</td>
<td>国土交通省北陸地方整備局</td>
<td>一級水系本川</td>
</tr>
<tr>
<th scope="row">2</th>
<td>利根川</td>
<td>322</td>
<td>茨城県</td>
<td>太平洋</td>
<td>国土交通省関東地方整備局</td>
<td>一級水系本川</td>
</tr>
<tr>
<th scope="row">3</th>
<td>石狩川</td>
<td>268</td>
<td>北海道</td>
<td>日本海（石狩湾） </td>
<td>国土交通省北海道開発局</td>
<td>一級水系本川</td>
</tr>
</tbody>
</table>
</div>
<div>
<div class="js-scrollable">
<table class="table text-nowrap">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">河川名</th>
<th scope="col">延長(km)</th>
<th scope="col">河口・合流地</th>
<th scope="col">流出先</th>
<th scope="col">管理所轄</th>
<th scope="col">河川指定区分・本支川</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>信濃川</td>
<td>367</td>
<td>新潟県</td>
<td>日本海</td>
<td>国土交通省北陸地方整備局</td>
<td>一級水系本川</td>
</tr>
<tr>
<th scope="row">2</th>
<td>利根川</td>
<td>322</td>
<td>茨城県</td>
<td>太平洋</td>
<td>国土交通省関東地方整備局</td>
<td>一級水系本川</td>
</tr>
<tr>
<th scope="row">3</th>
<td>石狩川</td>
<td>268</td>
<td>北海道</td>
<td>日本海（石狩湾） </td>
<td>国土交通省北海道開発局</td>
<td>一級水系本川</td>
</tr>
</tbody>
</table>
</div>
</div>See the Pen Untitled by 本田類二 (@curledtail_h) on CodePen.
いろいろ調べてみた結果、複数のtableをwrapしたそれぞれの.js-scrollable付きの要素が同レベルの階層に存在する場合、さらに親にwrap要素がないと干渉することがわかりました。
わかりにくい言葉ですみません、、、詳しくは下記コードで解決したのでご参照ください。
<div><!-- ScrollHintが動かないtableをさらにwrapしてみると動いた -->
<div class="js-scrollable">
<table class="table text-nowrap">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">河川名</th>
<th scope="col">延長(km)</th>
<th scope="col">河口・合流地</th>
<th scope="col">流出先</th>
<th scope="col">管理所轄</th>
<th scope="col">河川指定区分・本支川</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>信濃川</td>
<td>367</td>
<td>新潟県</td>
<td>日本海</td>
<td>国土交通省北陸地方整備局</td>
<td>一級水系本川</td>
</tr>
<tr>
<th scope="row">2</th>
<td>利根川</td>
<td>322</td>
<td>茨城県</td>
<td>太平洋</td>
<td>国土交通省関東地方整備局</td>
<td>一級水系本川</td>
</tr>
<tr>
<th scope="row">3</th>
<td>石狩川</td>
<td>268</td>
<td>北海道</td>
<td>日本海（石狩湾） </td>
<td>国土交通省北海道開発局</td>
<td>一級水系本川</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="js-scrollable">
<table class="table text-nowrap">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">河川名</th>
<th scope="col">延長(km)</th>
<th scope="col">河口・合流地</th>
<th scope="col">流出先</th>
<th scope="col">管理所轄</th>
<th scope="col">河川指定区分・本支川</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>信濃川</td>
<td>367</td>
<td>新潟県</td>
<td>日本海</td>
<td>国土交通省北陸地方整備局</td>
<td>一級水系本川</td>
</tr>
<tr>
<th scope="row">2</th>
<td>利根川</td>
<td>322</td>
<td>茨城県</td>
<td>太平洋</td>
<td>国土交通省関東地方整備局</td>
<td>一級水系本川</td>
</tr>
<tr>
<th scope="row">3</th>
<td>石狩川</td>
<td>268</td>
<td>北海道</td>
<td>日本海（石狩湾） </td>
<td>国土交通省北海道開発局</td>
<td>一級水系本川</td>
</tr>
</tbody>
</table>
</div>
</div>See the Pen ScrollHint-multipletable-Success by 本田類二 (@curledtail_h) on CodePen.