CSS
コンテンツの多いTABLEのスマホ表示
CSSのみでの対応
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
・
・
</tr>
</table>と狭いモニターやスマホで改行されまくるシチュエーションでは
<div class="target">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
・
・
</tr>
</table>
</div>と一階層外側で囲ってやり、
div.target {
overflow-x: scroll;
white-space: nowrap;
}とすることでレイアウトそのままで、ヘンな改行もされなくなる。
jsの併用
ただ、機種によってはスクロールバーが表示されないので、
横にスワイプできると明示してあげないと「単に表が横にはみ出ている」と思われかねない。
よって以下を併用してやることでユーザビリティは上がる。
https://appleple.github.io/scroll-hint/
jsとcssを読み込み、それより下部で
<script>
jQuery(function($){
$(function () {
new ScrollHint('.target', {
remainingTime: 4000,
i18n: {
scrollable: 'スクロールできます'
}
});
});
});
</script>とjQueryで起動させるか、公式通りの書き方でよい。すると、
といった具合になる。
細かい補足
上記jsを読み込むと、対象要素外側に勝手にposition:relativeがあたる。
これによって組み方によっては縦スクロールが少し生じて、スワイプ時にぐわんぐわんして非常に不快である。
そういう場合は、
div.target {
overflow-x: scroll;
white-space: nowrap;
position: static !important;
}とrelativeを打ち消し、且つそのままでは「スクロールできます」コンテンツがabsoluteなので、表示領域確保の為、
<div style="position: relative;">
<div class="target">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
・
・
</tr>
</table>
</div>
</div>ともう1つ囲ってやると不格好だけど解決。