[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア

サイト構築 -CSS

Post on:2016年10月11日

レスポンシブ対応のテーブルのデモ

デモでは4x5のテーブルで、さまざまなデバイスのスクリーンサイズでコンテンツが最適になるよう実装されています。

Simple Responsive Table in CSS: 幅1,200pxで表示

Simple Responsive Table in CSS: 幅800pxで表示

Simple Responsive Table in CSS: 幅480pxで表示

レスポンシブ対応のテーブルの実装

まずは、通常のテーブルの実装を確認しておきましょう。

HTML

テーブルの実装はごく普通で、4つのカラムを持っています。

<table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">Visa - 3412</td>
      <td>04/01/2016</td>
      <td>$1,190</td>
      <td>03/01/2016 - 03/31/2016</td>
    </tr>
  </tbody>
</table>

<table>

<caption>Statement Summary</caption>

<thead>

<tr>

<th scope="col">Account</th>

<th scope="col">Amount</th>

<th scope="col">Period</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

CSS

各セルの区切りは、水平に1pxのラインをいれ、垂直のラインはありません。

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}
table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}
table th,
table td {
  padding: .625em;
  text-align: center;
}

table {

border: 1px solid #ccc;

border-collapse: collapse;

margin: 0;

padding: 0;

table-layout: fixed;

width: 100%;

}

table tr {

background: #f8f8f8;

border: 1px solid #ddd;

padding: .35em;

}

table th,

table td {

padding: .625em;

text-align: center;

}

HTML: レスポンシブ対応

各セルに「aria-label」を加えます。
レスポンシブ対応のレイアウトのために使用しますが、「aria-label」はアクセシビリティにももちろん有益です。

  <td scope="row" aria-label="Account">Visa - 3412</td>
  <td aria-label="Due Date">04/01/2016</td>
  <td aria-label="Amount">$1,190</td>
  <td aria-label="Period">03/01/2016 - 03/31/2016</td>

CSS: レスポンシブ対応

600px以下のスクリーンでは、trとtdはテーブルの行とセルとしてではなく、ブロックレベルとして機能するように指定します。

@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
  }
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  table td:before {
    content: attr(aria-label);
    float: left;
  }
}