[パーツ]レスポンシブ対応テーブルデザイン th要素が縦横どちらにもあるときに使える

ニャン易度

	ネコ	イヌ
寿命	ネコは1歳くらいになると生殖可能年齢を迎え、7歳あたりから高齢期に差し掛かり、20歳超えはかなりの長寿とされる。	イヌは10歳になると老犬の域になり12歳から20歳程度まで生きる。
知能	知能は哺乳類の中でも高い部類に属し、人間とのコミュニケーションもかなりできることが、イヌと並ぶ愛玩動物の地位を獲得した要因となっている。	全般的に高い知能を有する。また、品種によってはより優れた学習能力を示す。
起源	イエネコの起源は、ネズミを捕獲させる目的で飼われ始めたヨーロッパヤマネコの家畜化であり、ヨーロッパヤマネコの亜種とされることもある。	イヌは最も古くに家畜化された動物であり、手に仔犬（イヌかオオカミかはっきりしない）を持たせて埋葬された、1万2千年ほど前の狩猟採集民の遺体が、イスラエルで発見されている。

<table class="cp_table">
<thead>
<tr>
<th></th>
<th>上のth要素1</th>
<th>上のth要素2</th>
</tr>
</thead>
<tbody>
<tr>
<th>左のth要素</th>
<td label="上のth要素1"><p>td要素</p></td>
<td label="上のth要素2"><p>td要素</p></td>
</tr>
<tr>
<th>左のth要素</th>
<td label="上のth要素1"><p>td要素</p></td>
<td label="上のth要素2"><p>td要素</p></td>
</tr>
<tr>
<th>左のth要素</th>
<td label="上のth要素1"><p>td要素</p></td>
<td label="上のth要素2"><p>td要素</p></td>
</tr>
</tbody>
</table>

.cp_table *, .cp_table *:before, .cp_table *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_table {
	width: 100%;
	border-collapse: collapse;
	border-right: 1px solid #dddddd;
}
.cp_table thead th {
	padding: 10px 15px;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	background: #dddddd;
}
.cp_table thead th:last-child {
	border-right: 1px solid #dddddd;
}
.cp_table tbody th {
	padding: 10px 15px;
	vertical-align: top;
	border-bottom: 1px solid #ffffff;
	background: #dddddd;
	white-space: nowrap;
}
.cp_table tbody tr:last-child th {
	border-bottom: 1px solid #dddddd;
}
.cp_table tbody td {
	padding: 10px 15px;
	vertical-align: top;
	border-bottom: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
	background: #ffffff;
}
@media only screen and (max-width:480px) {
	.cp_table thead {
		display: none;
	}
	.cp_table tbody th {
		display: block;
	}
	.cp_table tbody td {
		display: block;
		padding: 10px 5px;
	}
	.cp_table tbody td::before {
		font-weight: bold;
		float: left;/*上のth要素が長い場合こちらを解除すると1段落下り見やすくなります*/
		padding: 0.5em 0;
		content: attr(label);
	}
	.cp_table tbody td p {
		padding: 0.5em 0 0 1em;
    margin: 0;
	}
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

@CopypetJp

More Info

th要素が縦横どちらにもあるときに使える

copypet.jp

こんな記事はいかがですか？

[パーツ]レスポンシブ対応テーブルデザイン　th要素が縦横どちらにもあるときに使える