スマホサイト用にレイアウトを組む際、だいたいの部分が横フロートのものをたてに並び替えると思います。

しかし、表などは、縦軸と横軸があって初めて意味を成すことがほとんどなので、どうしても縦並びにできないものも出てきます。

そうしたときに、もともとのレイアウトを保ったまま部分的に横スクロールを発生させ表示してあげると見やすくて便利です。

ウィキペディアなんかがやっていますね。

CSSだけで実装できます。

こんな感じ

HTML

<div class="yoko_scroll">
   <p>テーブルなどのコンテンツはここ</p>
</div>

CSS

.yoko_scroll {
	/*中身スクロールします*/
   overflow: auto;
	/*テーブルを入れた場合、セル内の文字を折り返ししないようにします*/
   white-space: nowrap;
	/*惰性を与えてスムーズなスクロールにしますよ*/
   -webkit-overflow-scrolling: touch;
}
.yoko_scroll::-webkit-scrollbar{
	/*スクロールバーを出しますよ*/
   height: 5px;
}
.yoko_scroll::-webkit-scrollbar-track{
	/*スクロールバーの背景の色*/
   background: #F1F1F1;
}
.yoko_scroll::-webkit-scrollbar-thumb {
	/*スクロールバーの色を変えるなら*/
   background: #BCBCBC;
}

一度お試しください。

テーブルの中のテキストが部分的に大きくなってびっくりした

こうしてテーブルを組んだ時、どこかのセルの中の文字だけなぜか大きくなっていることがあります。

テーブルやセルだけに限ったことではないですが、tdの中ではけっこうな高確率でなりますね。

そういう時は、

-webkit-text-size-adjust: 100%;

これをあてこんであげてください。解消されます。