• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

一番かんたんなテーブルのレスポンシブ対応

投稿者アイコン
2019/10/03
書いた人:
rurippa!
カテゴリ:
CSS   HTML
279 views

一番かんたんなテーブルのレスポンシブ対応のやり方を紹介します。

一番かんたんなテーブルのレスポンシブ対応

目次

はじめに

今回レスポンシブするテーブルはこちら。
会社概要など 様々ところで見るテーブルだと思います。

 
見出し1 テキストテキスト
見出し2 テキストテキストテキスト
見出し3 テキストテキストテキストテキスト
		<table>
			<tr>
				<th>見出し1</th>
				<td>テキストテキスト</td>
			</tr>
			<tr>
				<th>見出し2</th>
				<td>テキストテキストテキスト</td>
			</tr>
			<tr>
				<th>見出し3</th>
				<td>テキストテキストテキストテキスト</td>
			</tr>
		</table>
		

スマホレイアウトの作り方

HTMLはそのまま、下記のCSSを追加するだけで、たて積みのレイアウトになります!

    th,td{
      display: block;
      width: 100%;
    }
    
    /* ↓装飾 */
    tr{
      border: 0;
    }
    th{
      font-weight: bold;
      text-align: center;
    }
    
見出し1 テキストテキスト
見出し2 テキストテキストテキスト
見出し3 テキストテキストテキストテキスト

注意点

画面を縮めたときに スマホレイアウトになるように、メディアクエリビューポートをお忘れなく。

ビューポートがよくわからない場合は、こちらをhead内に貼りましょう。
(詳しい説明は、今回は省略します)

<meta name="viewport" content="width=device-width,initial-scale=1">

また、メディアクエリがわからない場合は、今回であれば、下記をCSS内に追記しましょう。
@media〜で囲われた部分が ブラウザサイズが768px以下の時に適応されます。その時のブレイクポイントに合わせて、数値などは変わりますのでご注意ください。

    @media screen and (max-width: 768px) {
    /* 768pxまでの幅の場合に適応される */
      th,td{
        display: block;
        width: 100%;
      }
    }
    

最後に

うまくできましたか?
テーブルのレイアウトも色々ありますし、今回のやり方では難しい場合もあると思いますが、またの機会に他のレイアウトも紹介したいと思います(^^)


この記事を読んだ人はこんな記事も読んでいます