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

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

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;
}

サンプル