I’m writing this blog with WordPress twenty-twenty, and I decided to change the table design a little like below.
Chores | description |
---|---|
Programs | I have no choice to do this for my work. |
House choures | I have no choice to do this for my family. |
DIY | I have no choice to do this for my family. |
Go my hobby | I haven’t played in a few years. |
Go to [Appearance]-[Theme Editor], select [style.css], and add the following CSS at the end of the file. Then you can create a table that has no outer frames when you set [is-style-regular my-style-stripes] on the block setting [Additional CSS Class].
.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; }