Cocoon | テーブル（表）のcssカスタマイズ

Cocoonで角丸テーブルのcssを作るメモです。

作成するもの
1. CSS
参考

作成するもの

以下のようなテーブルを作ります。

見出し１	見出し２	見出し３	見出し４
要素１－１	要素２－１	要素３－１	要素４－１
要素１－２	要素２－２	要素３－２	要素４－２

CSS

cssコードは以下の様になります。

:root{
  --table-border-radius: 5px;/*角の丸さ*/
}
body #main table{
  box-shadow:  5px 5px 10px #e6e6e6,
               -5px -5px 10px #ffffff;
  border-radius: var(--table-border-radius);
}
body #main table tr th,body #main table tr td{
  box-shadow:  5px 5px 10px #e6e6e6,
               -5px -5px 10px #ffffff;
  border-radius: var(--table-border-radius);
}
body #main table tr th:hover,body #main table tr td:hover{
  background: #eef;
}