Site logo

Archived topic

Customize Gutenberg default table block (Global styles?)

7 replies · Started by Milo Lam on June 24, 2021

Viewing posts 1–8 of 8

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

This archived topic is closed to new replies.