Archived topic
Customize Gutenberg default table block (Global styles?)
7 replies · Started by Milo Lam on June 24, 2021
Hi,
Just wondering if there's a way to customize the default table block in Gutenberg/GP without having to use a plugin, sort of like a global style or some type of element/hook/PHP snippet.
Thanks in advance.
Hi there,
that really depends on what customization you're after - if its simple styling such as colors and borders then that can be achieved with CSS. Anything more advanced would require a plugin.
Gotcha. Mostly just simple styling that's all colors and borders for me. How would I start?
Thank you
They use the basic HTML Table Element - quite a few resources online about styling them.
But here are some basics that i have included the blocks wp-block-table class so it doesn't mess with other tables:
/* Table head */
.wp-block-table thead {
background-color: #000;
color: #fff;
}
/* Table Body */
.wp-block-table tbody {
background-color: #ccc;
color: #000;
}
/* Table Rows - All rows */
.wp-block-table tbody tr {
background-color: #00f;
}
/* Table Rows - alternating row */
.wp-block-table tbody tr:nth-child(odd) {
background-color: #fff;
}
/* Table body cells */
.wp-block-table tbody td {
border: 1px solid #f00;
}
Try adding each CSS Rule one at a time to see what part of the table it affects.
Great thanks David
YOu're welcome
Hi I also wanted to style my tables without extra plugin.
It's possible to have my first column highlighted like this comparison table from security.org I want to add comparison tables can u guide me achieve almost to that table
Hi there,
if you want to raise a new topic, and share a link to your site where i can see the table then i can take a look at the necessary CSS