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; }
ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス
2024/10/27
ブラウザ
カスタム投稿
Wordpress
2024/08/20
神社
御朱印
2024/07/06
神社
御朱印
2024/07/06
神社
御朱印
2024/02/09
神社