見出しやレイアウトサンプルのページをみていて、「表」がスマートフォン表示ではみ出したらスクロールする設定になっていたのに気づく。

CSS で実装できるようだったので、調べて以下サイトを一通り読んだが、該当サイトで適用されているかどうかつかめず。

http://webcommu.net/phone-table-scroll/

http://weback.net/mobile/2195/

http://m.designbits.jp/15041514/

そうこうしているうちに、以下のコードで実装できるとの解説に出会い解決。しかしどのサイトだったか見失ってしまった。

.entry-content table {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    display: block;
    white-space: nowrap;
  }

メディアクエリ

ただし、モバイルファーストのメディアクエリで作られているサイトでは、モバイル領域で設定するとPCサイズでもはみ出しスクロールとなる。PCサイズでは余裕で表示されるので、はみ出さず収める方が見やすい。そこで、設定解除のコードを入れてやることに頭をひねることになった。

.entry-content table {

white-space: normal;

}

normal を nomal と記述していては設定しても動かないわけだ。