ゆるくはじめるWordPress.

CSSだけでレスポンシブなテーブルデザイン3種

responsive-table-top

レビュー記事や店舗情報など、ちょっとした情報を載せる時にも便利なtableでの表組。でもスマホの小さな画面でで表示すると見づらかったり崩れたりしてしまう事もありますよね。そんな時のためにレスポンシブデザインでも見やすく使えるtableのサンプルコードを3つまとめました。
デザインやメディアクエリの指定をお好みで変更してお使いください。

あらかじめすべての要素にbox-sizing: border-box;を指定しています。
例:*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

Sample1:縦に並べ替える

表組サンプル1

↓↓ モバイル表示 ↓↓

表組レスポンシブ1

ウィンドウ幅がメディアクエリで指定したサイズ以下になると項目が縦並びに変化します。
<th><td>display: block;を指定するだけで交互に縦に並んでくれるので簡単。

HTML

<table>
<tr>
<th>&lt;thead&gt;</th>
<td>tableのヘッダー部分</td>
</tr>
<tr>
<th>&lt;tbody&gt;</th>
<td>tableのボディ部分</td>
</tr>
<tr>
<th>&lt;tfoot&gt;</th>
<td>tableのフッター部分</td>
</tr>
</table>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}
table th,
table td {
  padding: 10px;
  border: 1px solid #999;
}
table th {
  background-color: #eee;
  text-align: center;
  width: 30%;
}

@media screen and (max-width: 400px) {
  table {
    border-top: 1px solid #999;
  }
  table td {
    display: block;
    text-align: center;
  }
  table th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 100%;
  }
}

Sample2:項目を分離させる

表組サンプル2

↓↓ モバイル表示 ↓↓

表組レスポンシブ2

こちらは<tr>ごとに分離して内容を表示します。これもsample1の縦並びの応用です。縦に長くなるので項目が少ない時に使うのがおすすめ。
<thead>は非表示にしてしまうので、項目の内容をあらかじめHTMLのdata-labelに指定しておき、モバイルではそれを疑似要素で表示させています。

HTML

<table>
<thead>
<tr>
  <th>お部屋</th>
  <th>宿泊料金</th>
  <th>広さ</th>
  <th>タイプ</th>
  <th>その他</th>
</tr>
</thead>
<tbody>
<tr>
  <td data-label="お部屋">ダブル</td>
  <td data-label="宿泊料金">15,000円</td>
  <td data-label="広さ">25m²</td>
  <td data-label="タイプ">洋室</td>
  <td data-label="その他">朝食付き</td>
</tr>
<tr>
  <td data-label="お部屋">ツイン</td>
  <td data-label="宿泊料金">18,500円</td>
  <td data-label="広さ">30m²</td>
  <td data-label="タイプ">和室</td>
  <td data-label="その他">朝・夕食付</td>
</tr>
</tbody>
</table>

CSS

table {
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-collapse: collapse;
  width: 100%;
}
table th,
table td {
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px;
}
table th {
  background-color: #eee;
  text-align: left;
}

@media screen and (max-width: 400px) {
  table {
    border: none;
  }
  table thead {
    display: none;
  }
  table tr {
    border-top: 1px solid #999;
    display: block;
    margin-bottom: 20px;
  }
  table td {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    display: block;
    padding: 10px;
    text-align: right;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

Sample3:スクロールさせる

表組サンプル3

↓↓ モバイル表示 ↓↓

表組レスポンシブ3

ウィンドウ幅が小さくなって要素が入りきらなくなった分はスクロールで表示させるようにします。表の縦横を入れ替えてスクロールしても比較しやすいようになっているのがポイント。
-webkit-overflow-scrolling: touch;はスマホでスクロールを滑らかに動かす(慣性スクロール)ための指定です。

HTML

<table>
<thead>
<tr>
  <th>種類</th>
  <th>色</th>
  <th>値段</th>
  <th>生産地</th>
</tr>
</thead>
<tbody>
<tr>
  <th>りんご</th>
  <td>あか</td>
  <td>200円</td>
  <td>青森県</td>
</tr>
<tr>
  <th>みかん</th>
  <td>オレンジ</td>
  <td>350円</td>
  <td>愛媛県</td>
</tr>
<tr>
  <th>ぶどう</th>
  <td>むらさき</td>
  <td>400円</td>
  <td>山梨県</td>
</tr>
<tr>
  <th>メロン</th>
  <td>きみどり</td>
  <td>800円</td>
  <td>北海道</td>
</tr>
</tbody>
</table>

CSS

table {
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
table th,
table td {
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px;
}
table th {
  background-color: #eee;
}

@media screen and (max-width: 400px) {
  table {
    display: block;
    position: relative;
  }
  table thead {
    display: block;
    float: left;
  }
  table tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  table th,
  table td {
    display: block;
  }
  table tr {
    display: inline-block;
  }
  table tbody tr {
    margin-right: -5px;
  }
}

スポンサーリンク

公開日: