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

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

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

tableをdivで囲います

tableの親要素を作ります。


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

サンプル

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

cssで調整します。


.table-scroll table {/*スクロールしたいtableを選択します*/
  display: block;
  overflow-x: scroll;/*横スクロールの設定*/
  white-space: nowrap;/*折り返し指定なしの設定*/
}

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

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

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

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


.table-row table th {/*縦並びにしたいtableを選択します*/
 float:left;
 width:100%;
 padding:10px;
}

.table-row table td {/*縦並びにしたいtableを選択します*/
 float:left;
 width:100%;
 padding:10px;
}

サンプル

タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
タイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト
[related_posts_by_tax posts_per_page="4"]