★Bluetooth搭載、充電可能なFMトランスミッターを紹介★

「コピペ可・究極方法」あらゆる画面サイズに!CSSだけでレスポンシブテーブルを作る

「コピペ可・究極方法」CSSだけでレスポンシブテーブルを作る1 IT・電化製品
この記事は約4分で読めます。

PC対応・スマホ対応・タブレット対応・レスポンシブが当たり前になってきてるこの時代、

table(テーブル)はPCへの対応がなんとかできたら、スマホの画面が崩れてしまう。あ~もう限界~~!

様々な対応方法、やり方がありますが

今回はもっともシンプルで簡単に、そして実用的な賢い実装レスポンシブだけを紹介します。

まずは、各端末の表示画面を確認しておきましょう

PCの表示画像

PCの表示

スマホの表示画像

スマホの表示

実際の表示画面

実際の表示画面はPCとスマホで下のテーブルをそれぞれ確認して下さいね!
支払い日付金額次回
支払い #102/01/2019¥2,31101/01/2019 – 01/31/2019
支払い #203/01/2019¥3,21102/01/2019 – 02/28/2019
支払い #304/01/2019¥3,21103/01/2019 – 03/31/2019
支払い #404/01/2019¥3,21104/01/2019 – 04/30/2019

テーブルのタテ列がどれだけ多くても平気!ヾ(。>﹏<。)ノ゙✧*。

 

レスポンシブ対応のソースコードを見てみましょう

html
<table>
<thead>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
<th>タイトル3</th>
<th>タイトル4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="支払い">支払い #1</td>
<td data-label="日付">02/01/2019</td>
<td data-label="金額">¥2,311</td>
<td data-label="次回">01/01/2019 - 01/31/2019</td>
</tr>
<tr>
<td data-label="支払い">支払い #2</td>
<td data-label="日付">03/01/2019</td>
<td data-label="金額">¥3,211</td>
<td data-label="次回">02/01/2019 - 02/28/2019</td>
</tr>
</tbody>
</table>
CSS
table {
    border: 1px solid #ccc;
    width: 80%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
  }

  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }

  table th, table td {
    padding: 10px;
    text-align: center;
  }

  table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }

  @media screen and (max-width: 600px) {

    table {
      border: 0;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }

600px以下のスクリーン(スマホなど)では、積み重なって表示されます。

以上があらゆる画面サイズに!CSSだけでテーブルをレスポンシプ対応させる方法でした。