---
title: "How to change the background color of Grouped Rows"
description: "Guide to Styling Grouped Column rows"
url: https://help.wpdatatables.com/en/articles/8-how-to-change-the-background-color-of-grouped-rows
collection: "Styling and CSS"
updated: 2026-09-02
language: en
---

# How to change the background color of Grouped Rows

Guide to Styling Grouped Column 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](https://wpdatatables.com/documentation/column-features/row-grouping/).

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:

```javascript
.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:

```javascript
.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!