How to change the background color of Grouped Rows

If you have created non-server-side tables (tables linked to Excel, CSV, Google Spreadsheet, XML, PHP, JSON, or MySQL query-based tables with Server-side processing turned off), you can select a column to be used for row grouping. More information about this feature can be found here.

To make grouped rows stand out, you may want to add a background color. However, conditional formatting and column colors won’t work since the column is converted into rows.

Instead, you can add custom CSS in the “Customize” section above the table:

.wpDataTable td.group{
    background: red;
}
.wpDataTable td.group:hover{
    background: blue;
}

If you want to apply this styling to a specific table, use its table ID. For example:

.wpDataTableID-1 td.group{
    background: red;
}
.wpDataTableID-1 td.group:hover{
    background: blue;
}

Just replace "1" with the actual ID of your table.

You can also customize grouped rows further by adding other styles, such as changing font colors, borders, and more.

Hope this helps!