テーブル

テーブル

  • HTML
  • CSS

1行目が見出しのセルになっている、シンプルな構成のテーブルです。見出し行のほか、以下に並んでる行には交互に背景色を設定しています。

See the Pen 【テーブル】 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. <caption>と<thead>と<tbody>で構成されている基本的な<table>になります。
  2. cssを使用し1行目と、2行目以降の<td>を含んでいる行には交互に背景色を設定しています。
  3. 交互に背景色を設定するために、tr:nth-of-type(2n)のセレクタを使用し反映させています。
  4. 画面幅が小さくなった場合、テーブルのレイアウト崩れを防ぐため、テーブルを囲っているエリア内で横スクロールが出来るようにしてあります。

テーブル

  • HTML
  • CSS

横方向に読むシンプルな構成のテーブルです。

See the Pen 【テーブル】シンプル2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. <th>に::afterを使用し、三角形を配置しています。

テーブル（レスポンシブ対応）

  • HTML
  • CSS

通常表示時はテーブルですが、モバイルを想定した画面幅になった時、各行がカード型の表示になります。

See the Pen 【テーブル】レスポンシブ対応 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 基本的な<table>構成になっており、<caption>と<thead>と<tbody>と<tfoot>が使用されています。
  2. 作例のコードではブラウザ幅が600px以下になるとSP想定のレイアウトに切り替わります。
  3. SP表示時は、<td>タグ内のdata-label属性に設定した値を、cssの::beforeを使用し生成しています。
  4. セル内の横並びにはdisplay: flex;を指定し、justify-content: space-between;を組み合わせ左右に配置しています。