tableでborder-radiusを設定する方法

概要

CSSでborder-radiusとborder-collapseプロパティが共存してくれなくて面倒だったのでメモ

やり方

1. td, thにborderを設定
2. tableの四隅でborder-radiusを設定

動くコード

一例です。この通りでなくてもok

/* 表全体の設定 */
table {
  border-collapse: collapse;
}
/* セルの設定 */
td,
th {
  border-bottom: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
}
/* 四隅のborderの設定 */
th:first-child {
  border-top-left-radius: 1rem;
}
th:last-child {
  border-top-right-radius: 1rem;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 1rem;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 1rem;
}
/* 重複するborderの消去 */
th {
  border-bottom: none;
}
tr td :not(:first-child),
tr th :not(:first-child) {
  border-left: none;
}