How to Change the Color of Non-Striped Rows and Columns in the WordPress Table Block

Customizing the appearance of tables in WordPress can make your content more engaging, streamline your overall design, and help users focus on important data.

One design that you can try to enhance the appearance of the tables is to adjust the colors of non-striped columns and rows in the WordPress Table block. This can improve readability by creating subtle contrasts.

Unfortunately, the WordPress Gutenberg editor doesn’t provide a direct option to change the color of non-striped rows and columns on the Table block. While plugins offer quick solutions, they can also bloat your site, affecting performance.

Thankfully, WordPress allows customization through CSS, enabling you to tailor your tables without additional plugins.

In this article, we’ll walk you through the steps to change the color of non-striped rows and columns in the WordPress Table block, using straightforward CSS to ensure your tables fit seamlessly with your site’s design.

As a bonus, we will also provide CSS code to set the border on the Table block, which you can use to blend with your overall design.

How to Change the Color of Non-Striped Rows and Columns in the WordPress Table Block (without Plugin)

Step 1: Add the Table Block

First, go to the WordPress Gutenberg editor by creating a new post type (page or post), or you can select the existing one.

Once you are in the Gutenberg editor, add the Table block, then edit and tweak your table as you like. Of course, don’t forget to change the table style to stripes.

As you can see from the image above, when you apply the stripes style to your Table block, the background color in the even positions (2, 4, 6, etc.) is changed but not for the odd positions/non-striped (1, 3, 5, etc.).

As we mentioned earlier, you only find the option to change the background color for striped rows and columns, but not for non-striped. By default, the non-striped rows and columns in the Table block tend to be grey or white.

Step 2: Add the Custom CSS Snippet

Once you’ve added and styled your Table block, we must add the custom CSS snippet to your WordPress theme.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the available field. If you use a block theme, you may need to enable the theme customizer first.

Here is an example of the CSS snippet you can use to change the color of non-striped rows and columns:

.wp-block-table tbody tr:nth-child(odd) {
    background-color: #f7ff16 !important;
}

If you want to add the border to your tables, here is an example of the CSS snippet you can use:

.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {
    border: solid;
    border-color: #000000;
}

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

You can preview your page by clicking the Preview button to see the result. If you want to, remember to save or publish your page.

What did the CSS code do?

.wp-block-table tbody tr:nth-child(odd) {
    background-color: #f7ff16 !important;
}

• Selector: .wp-block-table tbody tr:nth-child(odd)
  • Targets the odd-numbered rows in the (body section) of tables with the wp-block-table class.
  • nth-child(odd) selects rows in positions 1, 3, 5, etc., creating an alternating row effect.
• Property:
  • Sets the background color of these odd-numbered rows to a bright yellow shade (#f7ff16).
  • !important : It overrides any other conflicting styles that might apply to these rows.

.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {
    border: solid;
    border-color: #000000;
}

• Selector: .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th
  • Targets all table data, headers, and cells within tables that have both the wp-block-table class and the is-style-stripes class.
  • The is-style-stripes class is applied when the “stripes” style is enabled in the block editor for the Table block.

• Properties:
  • border: solid; it applies a solid border style to each cell.
  • border-color: #000000; it sets the border color to black.

The Bottom Line

Changing the color of non-striped rows and columns in the WordPress Table block without a plugin is simple and customizable with a few lines of CSS. By targeting specific rows in odd positions (1, 3, 5, etc.). It creates an alternating row’s color with striped rows that have even positions (2, 4, 6, etc.).

This method not only enhances the table’s readability but also gives you greater control over your site’s appearance — all without the need for additional plugins. With this method, you can achieve a clean, customized look while keeping your site lightweight and efficient.