「WordPressで使う表の角カドを丸くしたい」「角丸のテーブルを作りたい」という人へ。簡単な方法を提案します。コピペで利用いただけます。
目次(クリックでジャンプ)
WordPressのテーブルは…
WordPressの表(テーブル)は表現力に乏しく積極的に使っていませんでしたが、情報を整理するのに表が役立つのは間違い無いありません。
個人的にはデザインにこだわりがありｗ「情報の構造」と「図像のコントラスト」が一致しているのが理想の表なのですが…そこまでは無理だとしても、せめて表全体を太い輪郭で囲みたいと思い色々ググったり試行錯誤してみて、簡単な方法を一つ思いついたので備忘録として書いておきます。
結論から言うと、table全体に「overflow:hidden;」を設定した上で、本来は投影表現に使うボックスシャドウで輪郭を表現します。
ビフォーアフターを比較
加工前の表…メリハリがなくてボンヤリ
加工後の表…メリハリが付きました
(CSS)
.article table{
margin-bottom:10px;
line-height: 0.9em;
overflow: hidden;/* はみ出た部分を非表示 */
border-radius: 3px 10px;/* 角丸の半径(左上・右下と右上・左下) */
box-shadow: 0px 0px 0px 2px;/* x位置 Y位置 ぼかし幅 影の大きさ(ここでは線の太さ) 色は省略 */
}
.article td, .post th{
padding:6px 4px;/* セルの余白を小さく */
}
ただ、ボックスシャドウは輪郭の外側なのでよく見ると…
表の中のセルの輪郭？が残っていて、ぼかしをかけたように見えてしまっています。内側にシャドウを落とそうとしても一部にしか落ちず、まあ、とりあえずは我慢ということで。
輪郭(ボックスシャドウ)の色を薄く指定すれば目立たないと思いますが…今日はここまで
この記事が
あなたの役に立てたら嬉しいです！