Categories
Programs IT Support

Change the table design of WordPress theme twenty- twenty

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.
Sample

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;
}