theme.json core/table default padding and border color

I’m guessing you want to actually style the table cells and not the outer table element?

If so, you would need CSS to target the cells inside the table.

In theme.json this would be done like this:

"core/table": {    
    "css": "& td {border-width: 1px; border-color: #b2b2b2; padding-left: var(--wp--preset--spacing--20); padding-right: var(--wp--preset--spacing--20);}"
}

Thank you @uxl,

I did not work with the CSS in theme.json. However i was able to set the CSS using the /wp-admin/customize.php panel. The bellow lines are working for me.

/*Table*/
/*Table padding*/
.wp-block-table  {
	padding-right: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--20);
}

/*Table color*/
.wp-block-table table thead th,
.wp-block-table table tbody td {
  border: 1px solid #eaeaea;
}

Do you know the reason why it is not possible to apply padding in theme.json without the help off CSS? According to reference-guides it should be possible.

Many thanks for your help.

• This reply was modified 1 year, 6 months ago by Earthstoriez. Reason: Added information

I believe it is possible to apply padding but it appears that the padding is not visible because it is outside the table (the overall width calculation is not including the padding).

You would need to add box-sizing: border-box to the table block, and this will make the width calculation include the left/right padding.

.wp-block-table {
    box-sizing: border-box;
}

I’m not sure why this is not included by default in the core block styling, as it is for other blocks such as groups, images etc.

BTW the site editor now has an Additional CSS section.

See this reply from a different topic for details of where to find it.

@uxl thank you for you suggestion.

I have tried to add “box-sizing: border-box;” in customize.php and then set the padding in theme.json. However, it did not apply on the front end nor the editor.

I would really love to apply the setting and CSS in theme.json, as it would be displayed in the editor and on the front end. I have found this announcement of wordpress developers where the describe how to use the CSS in the theme.json but i was not able to translate it into something that works.

What are you wanting to do by adding left and right padding to the table?

Are you wanting the table to be not as wide as the content area? Or something else?

@uxl thank you for following up.

Exactly, I want the table not to be as wide as the content area. And i want that to be default for all tables. Also displayed in the editor.

I have now figured out how to apply the CSS utilizing the theme editor. I applied my above CCS in the styles panel, kebab menu, additional CSS. It gets displayed in the editor too. Therefore, my issue is resolved

That’s great to hear that you have solved this. Thank you for updating with the solution.