表の横スクロール

スマホメインのCSSである。
画面全体をスクロールするものではない。テーブルの部分だけを横スクロールする。
したがって、テーブルの部分だけをスライド/スワイプ(画面に軽く触れたまま目的の方向になぞる)する必要がある。動くのはテーブルだけで他の部分は動かない。

設定例
.soto {overflow-x:scroll;}
.naka {border-collapse:collapse;min-width:728px;}
.naka2 {border-collapse:collapse;}
.naka3 {border-collapse:collapse;white-space:nowrap;}

@media screen and (min-width:768px) {
  .soto {overflow-x:auto;}
}

要点
スマホとパソコンの差は「overflow-x」の処理だけである。
しかし、スマホで枠サイズの最小(min-width)を設定する必要があるのかどうかは検討を要する。
以下の実験例から、スマホでの「min-width:728px;」はカットしたほうがよい。それを入れるぐらいなら「white-space:nowrap;」のほうがまだマシである。

soto,nakaで横幅が長い表

スマホの場合、画面幅の最低を固定(728px)し横スクロールできるようにする。横幅が長い表の場合はこれでよいが短い表の場合は問題が出てくる。
パソコンの場合、これは普通の表である。
ここから始まる 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル


soto,naka2で横幅が長い表

スマホの場合、画面幅を固定しない(最小幅を設定しない)と自動的に改行されてしまう。
パソコンの場合、普通の表である(改行されていない)。
ここから始まる 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル


上と同じ設定で画像にした場合。
阿寒湖 阿寒湖 阿寒岳 阿寒岳 マリモ


soto,naka3で横幅が長い表

「white-space:nowrap;」を設定した場合。自動改行はしない。明示的な改行はできる。
ここから始まる 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル 他は普通
のセル
他は普通のセル 他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル


soto,nakaで横幅が短い表

スマホの場合、画面幅を最小でも728pxにして、横スクロールできるようにする。
テーブル枠を728px確保して、それを2列にするからすき間の多い表になる。
しかし、この仕様が妥当だとは思われない
ここから始まる 他は普通のセル
他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル


soto,naka2で横幅が短い表

スマホの場合、画面幅を固定しない例。短い表なら問題ない。
ここから始まる 他は普通のセル
他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル


緑のテーブル枠

以前の設定は次のようなものだった。
以前の例
table.tgr {border-width:0;border-spacing:1px;color:black;background-color:green;font-family:"MS 明朝",serif;font-size:15px;line-height:1;}
.tgr tr {background-color:#ffffff;}

これは次のようにする。
設定例
table.tgr {border-collapse:collapse;}
.tgr td {border: 1px solid green;white-space:nowrap;}

結果は同じである。
「white-space:nowrap;」は明示的にbrで改行する以外は自動的に改行しないことを指定する。
自動的に改行されることを防止するためである。

soto,tgr
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通
のセル
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル
他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル 他は普通のセル