【コピペOK】ずっと使えるCSSで表組

WEBサイトを作るときにいつでも変わらず付いてくる「表組」。
ググればやり方はいろいろとあって、ULとLIタグを使ってCSSで組む方法もありますが、ULとLIは1つのサイトで他にもよく使うと思うので「TableとCSS」を組み合わせる方法が一番良さそうに思います。

レスポンシブで、表組の内容によって良さそうな方法を2つ紹介です。

レスポンシブで簡単に表組を作る

表組その1

PCで見たときと、スマホ(320px以下)で見たときいは以下。
tabel-css-table1
<実際のサンプル>
<thead> tableのヘッダー部分
<tbody> tableのボディ部分
<tfoot> tableのフッター部分

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
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: 320px) {
  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%;
  }
}
<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>

表組その2

PCで見たときと、スマホ(320px以下)で見たときいは以下。
tabel-css-table2
<実際のサンプル>
お部屋 宿泊料金 広さ タイプ その他
ダブル 15,000円 25m² 洋室 朝食付き
ツイン 18,500円 30m² 和室 朝・夕食付

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
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: 320px) {
  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;
  }
}
<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の1つかと思います。紹介したCSSもググって探したのですが、しばらくはこのCSSを使うようにして制作時間を時短したいと思います!

参考&Special Thanks

下記の記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。

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

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。