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; }
2023/06/30
神社
御朱印
2023/06/15
Mac
Linux
2023/04/16
時宗
御朱印
2023/04/14
臨済宗
御朱印
2023/04/05
寺院
御朱印