CSSでレスポンシブなテーブルを表示する

以前テーブルを分けてスクロールさせる方法をご紹介いたしました。

テーブルを分けて縦スクロールをする
今回はテーブルを分けて縦スクロールをする方法をご紹介いたします。 サンプル サンプルではテーブルの見出し下のデータ部分がスクロールし...
テーブルを分けて横スクロールをする
前回はテーブルを分けて縦スクロールをする方法をご紹介いたしました。今回はテーブルを分けて横スクロールをする方法ご紹介いたします。 サン...

今回はCSSでレスポンシブなテーブルを表示する方法をご紹介いたします。

サンプル

サンプルではPCで横に見出しがあるタイプのものを、400px以内の表示の時に「th」と「td」を縦に表示させています。

サンプル1では「th」と「td」を縦に並べ、サンプル2では行(tr)ごとに分離して縦に並べています。

サンプル画像

PCでのテーブル表示
PCでの表示
モバイル-縦に表示
縦に表示
モバイル-行を分離して縦に表示
行を分離して縦に表示

PCでは見出しとデータを横に表示させ、モバイルでは縦に並べています。

縦に表示

html

普通のtable要素です。

css

PCとモバイルで共通で使用する「基本プロパティ」と横幅400px以内で使用する「モバイル用」に分かれています。

解説1

「border-top: 1px solid #ccc;」でテーブルトップのボーダーを表示しています。テーブル自体にボーダートップを指定する理由は、解説3で記述している「table th」の「border-top: none;」から来ています。

解説2

「th」と「td」に対して「display: block;」、「width: 100%;」とすることで縦に表示しています。

解説3

「th」を縦に表示するので「td」と重なるボーダーを消しています。

全ソース

分離して縦に表示

html

HTMLはサンプル1と同じです。

css

PCとモバイルで共通で使用する「基本プロパティ」と横幅400px以内で使用する「モバイル用」に分かれています。ほぼサンプル1と同じですが、行を分離するために「table tr」の記述が増えています。

解説1

tableの「tr」(行)に対して「display: block;」、「margin-bottom: 10px;」を指定することによって、行を分離させています。

解説2

「th」と「td」に対して「display: block;」、「width: 100%;」とすることで縦に表示しています。

解説3

「th」を縦に表示するので「td」と重なるボーダー、「bottom」を消しています。サンプル1と違い、「th」は「td」と分離するので「border-top: none;」は必要ありません。

全ソース

まとめ

  • 縦に表示する場合、「th」と「td」に「display: block;」、「width: 100%;」を指定する。
  • 行(tr)ごとに分離して表示する場合、「tr」に「display: block;」、「margin-bottom」を指定する。

。モバイルで横幅が狭い場合、縦に表示すると少しだけテーブルが見やすくなります。

今回ご紹介したシンプルなテーブルであれば、CSSだけでもモバイルで表示を変えることが可能なのでおすすめです。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

CSSでレスポンシブなテーブルを表示する
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!