スマホサイトの際にtableをどの様に表示する

スマホの際にtableを横スクロールで表示

PCサイトを作成した際に表を作ったけどスマホの時にでどうすればいいか?
非表示にして同じ内容をSPで作ることないdrすか?
そんな時は横スクロールで表示してみてはいかがですか?

tableをdivで囲います

tableの親要素を作ります。

サンプル

タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト

cssで調整します。

実装した結果が下記になります。
スマホで確認して下さい。

タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト

tableをfloatを使って縦並びに変える

先ほどのtableの「th」と「td」にfloatを当てて縦並びに変更します。

サンプル

タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
%d人のブロガーが「いいね」をつけました。