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

目次

• はじめに
• スマホレイアウトの作り方
• 最後に

はじめに

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

　

見出し１	テキストテキスト
見出し2	テキストテキストテキスト
見出し3	テキストテキストテキストテキスト

		<table>
			<tr>
				<th>見出し１</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;
    }
    

見出し１	テキストテキスト
見出し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%;
      }
    }
    

最後に

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