Blog

HOME > Web > css > 【CSS】角丸のテーブルを作成する方法

【CSS】角丸のテーブルを作成する方法

2017/06/14

css

備忘録です。

tableタグにborder-radiusを指定しても角丸にならない場合の対処方法です。

参考サイト
CSS：角丸のテーブルを作成する方法

通常のCSS

.table {
  border: 1px solid #aaa;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 6px;
}
.table th,
.table td {
  padding: .5em 2em;
  border: 1px solid #aaa;
}
.table thead th {
  background-color: #ddd;
}
.table tbody th {
  background-color: #eee;
}

border-collapse:collapseだと角丸にならないため、border-collapse:separateに変更する。
ただ変更しただけだと見た目が悪くなることがあるので、さらに変更をします。

変更したCSS

table {
  border: 1px solid #aaa;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  overflow: hidden;
}
table thead th,
table tbody th,
table tbody td {
  padding: .6em 3em;
  border-bottom: 1px solid #aaa;
}
table thead th {
  background-color: #ddd;
}
table tbody th {
  background-color: #eee;
}
table thead th + th,
table tbody td {
  border-left: 1px solid #aaa;
}
table tbody tr:last-child th,
table tbody tr:last-child td {
  border-bottom: none;
}

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

神社仏閣ホームーページ制作

ホームページ制作問合せ

口コミロボ