REDLINE MAGAZINE | CSSのみでレスポンシブなテーブルデザインを。

サンプルページ

まずはサンプルから。
内容としてはCSSだけでモバイル環境の場合にテーブルのデザインを変えるというもの。

>>REDLINE MAGAZINE | レスポンシブ対応テーブルサンプル

ネタ元のCODEPENページ。

>>A Pen by Captain Anonymous

ソース

自分とこのサンプルからソース部分を。まずはhtmlソース。

<table>
  <thead>
    <tr>
    <th>イベント名</th>
    <th>開催日</th>
    <th>場所</th>
    <th>料金</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td data-label="イベント名">なんたらイベント</td>
    <td data-label="日時">2015/04/08(水) </td>
    <td data-label="場所">大阪府大阪市どこどこ</td>
    <td data-label="料金">1,000円</td>
    </tr>
    <tr>
    <td data-label="イベント名">かんたらイベント</td>
    <td data-label="日時">2015/04/09(木)</td>
    <td data-label="場所">兵庫県神戸市どこどこ</td>
    <td data-label="料金">1,000円</td>
    </tr>
  </tbody>
</table>

次に肝心のcssソース。

table{
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	border:1px solid #ccc;
	padding:0;
	margin:0;
}

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

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

table th{
	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;
		font-weight: bold;
	}
}

ポイントはcontent:attr()の利用

contentプロパティは:before擬似要素や:after擬似要素にコンテンツを挿入する際に使用するプロパティ。content:attr()は関数型の値で括弧内に指定した属性名の値が入ります。

:before擬似要素や:after擬似要素を利用したCSSネタなんかも最近はよく見かけますが、ツールチップの矢印だったり、アイコンフォントを入れるためだったりのお話が多いので、個人的には「content:attr()」ってのは盲点でした(；´Д｀)

CSSでやってる事は、テーブルの各要素の装飾、@mediaでモバイル端末用のテーブルの見た目を適した形へ整える。theadの内容は必要ないので非表示に、th要素とtd要素をblock化、そして今回のサンプルでは予めtd要素にdata-labelというカスタムデータ属性を付けているのでcontent:attr()でその内容を表示させています。

cssのソースも比較的スッキリしたものなので、使いやすそうだなと思いました(*´ω｀*)