背景色がある角丸tableをつくる

コードと記事の背景

こんな感じの角丸のテーブルを作ります。
角丸テーブルの作り方はすぐ見つかったけど、背景色ありの角丸テーブルの作り方が調べてすぐ出なかったので備忘録までに。

See the Pen 角丸table by guchiparasol (@guchiparasol) on CodePen.

解説

border-radiusでtableを角丸にする。

.table-radius {
  border: none;
  border-radius: 5px;
  border-spacing: 0;
  border-collapse: separate;
}

罫線と背景色を設定する。

.table-radius tr th,
.table-radius tr td {
	border: none;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

.table-radius tr:nth-child(odd){
  background: #ddd;  
}

.table-radius tr th{
  background: #333; 
  color:#fff;
}

.table-radius tr td:first-child {
  border-left: none;
}

.table-radius tr td:last-child {
  border-right: none;
}

背景色を設定した場合、角丸を無視して真四角に塗られてしまうので、四隅のth・tdタグに角丸を設定する。

.table-radius tr th:first-child {
  border-radius: 5px 0 0 0;
}

.table-radius tr th:last-child {
  border-right: none;
  border-radius: 0 5px 0 0;
}

.table-radius tr:last-child td:first-child{
  border-top: none;
  border-radius: 0 0 0 5px;
}
.table-radius tr:last-child td:last-child {
  border-bottom: none;
  border-radius: 0 0 5px 0;
}