WordPress twenty-twentyでこのブログを書いているのだが、付属のテーブルを少しだけおしゃれに外枠をなしにすることにした。
テーブルをブロックで作成した際に、[追加CSSクラス]に[is-style-regular my-style-stripes]とすると以下のような外枠なしの表ができる。
| 人生項目 | 内容 |
|---|---|
| プログラム | 仕事のために仕方なくやっている |
| 家事 | 家族のために仕方なくやっている |
| DIY | 家族のために仕方なくやっている |
| 囲碁 | ここ数年打っていない。打つ相手もいない。。。 |
やり方は[外観]-[テーマエディター]でstyle.cssを選択し以下のCSSを最後に追加する。(もしくは、[外観]-[カスタマイズ]で左側ペインの[追加CSS]に追加。)
.my-style-stripes table{
border:none;
}
.my-style-stripes table tr{
border:none;
}
.my-style-stripes table tbody tr:nth-child(odd) {
background: #dcd7ca;
}
.my-style-stripes table thead th {
border-top:none;
border-right: none;
border-left: 1px solid #6d6d6d;
border-bottom: 2px solid #6d6d6d;
}
.my-style-stripes table tbody td{
border-top:none;
border-right: none;
border-left: 1px solid #6d6d6d;
border-bottom: 1px solid #6d6d6d;
}
.my-style-stripes table thead th:first-child, .my-style-stripes tbody td:first-child{
border-left: none;
}
.my-style-stripes tbody tr:last-child td {
border-bottom: none;
}