擬似クラスと間接セレクタを使って汎用性のある角丸テーブル

HTML&CSS

hakoishi

2013.06.12

洗濯すると雨の降るhakoishiです。

今回は汎用的に使える角丸テーブルのソースをご紹介。
border-radiusに合わせて、IE9以上の対応です。

サンプル

まずはサンプル。
この5種類です。

theadなし、tbody左行がth。
theadあり。tbodyはthなし。
theadあり。tbody左行がth。
thead複数行、セル結合あり。tbody左行がth。
theadあり。tbody左行がth。tfootあり。

サンプルページ

擬似クラスと間接セレクタを使って汎用性のある角丸テーブル

お約束

tbodyを必ず入れる
tfootを入れる場合、tbodyの上部へ

上記の点だけ注意すれば、テーブルや内部のセルへのクラスの付与は不要です。

CSS


table { /* 上、左にborder */
	width: 100%;
	border-collapse: separate; /* ポイント */
	border-spacing: 0;
	border-radius: 10px;
	border-top: 1px solid #888888;
	border-right: none;
	border-bottom: none;
	border-left: 1px solid #888888;
	background-color: #FFFFFF;
}

th,
td { /* 右、下にborder */
	padding: 5px 10px;
	border-top: none;
	border-right: 1px solid #888888;
	border-bottom: 1px solid #888888;
	border-left: none;
	vertical-align: middle;
}

td {
	background-color: #EFEFEF;
}

thead th,
tfoot {
	color: #FFFFFF;
}

thead th,
tfoot th {
	background-color: #333333;
}

tfoot td {
	background-color: #666666;
}

tbody th {
	background-color: #FCC;
}

/* 1行目、左端の要素 */
tr:first-child th:first-child,
tr:first-child td:first-child {
	border-top-left-radius: 10px; /* 左上が角丸 */
}

/* 1行目右端の要素 */
tr:first-child th:last-child,
tr:first-child td:last-child {
	border-top-right-radius: 10px; /* 右上が角丸 */
}

/* theadのない場合のtbody > th（thead > thと同様のスタイルに。） */
table tbody:first-child th {
	background-color: #333333;
	color: #FFFFFF;
}

/* theadがある場合のtbody1行目、左端の要素 */
thead ~ tbody tr:first-child th:first-child,
thead ~ tbody tr:first-child td:first-child {
	border-top-left-radius: 0; /* 左上が角カク */
}

/* theadがある場合のtbody1行目、右端の要素 */
thead ~ tbody tr:first-child td:last-child {
	border-top-right-radius: 0; /* 右上が角カク */
}

/* tbodyのラスト1行、左端の要素 */
tbody tr:last-child th:first-child,
tbody tr:last-child td:first-child {
	border-bottom-left-radius: 10px; /* 左下が角丸 */
}

/* tbodyのラスト1行、右端の要素 */
tbody tr:last-child td:last-child {
	border-bottom-right-radius: 10px; /* 右下が角丸 */
}

/* ----- tfootありの場合 ----- */

/* tbodyのラスト1行、左端の要素(tfootない場合のtbodyのスタイルを上書き) */
tfoot ~ tbody tr:last-child th:first-child,
tfoot ~ tbody tr:last-child td:first-child {
	border-bottom-left-radius: 0; /* 左下が角カク */
}

/* tbodyのラスト1行、右端の要素(tfootない場合のtbodyのスタイルを上書き) */
tfoot ~ tbody tr:last-child td:last-child {
	border-bottom-right-radius: 0; /* 右下が角カク */
}

/* tfootのラスト1行、左端の要素 */
tfoot tr:last-child th:first-child,
tfoot tr:last-child td:first-child {
	border-top-left-radius: 0; /* 左上が角カク */
	border-bottom-left-radius: 10px; /* 左下が角丸 */
}

/* tfootのラスト1行、右端の要素 */
tfoot tr:last-child td:last-child{
	border-top-right-radius: 0; /* 右上が角カク */
	border-bottom-right-radius: 10px; /* 右下が角丸 */
}