# 🟦 🟩 🟪 How to Color Rows in a Table Collection

**URL:** <https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial\
**Created:** [February 27, 2026, 1:40am UTC](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512 "2026-02-27T01:40:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 27, 2026, 1:40am UTC](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512/1 "2026-02-27T01:40:47Z")

</div>

There are multiple ways to color rows inside a **Table Collection**.  
To indicate row status (e.g., High, Medium, Low), you can use one of _three approaches_:

1. **Button column** (`aria-label`) — reads the button’s `aria-label` to determine row color.
2. **Image fragment** in the `src` — adds a fragment to the image URL (e.g., `#High`).
3. **Boolean column** — uses a true/false value to control row color.

* * *

# 🧵 Part 1 — Color Rows via Button Column

This method reads the button’s `aria-label` and styles the entire `<tr>` accordingly.

> ⚠ Add your Table Collection class as: `custom-class noTranslate`  
> `noTranslate` is required so the button’s `aria-label` is _not translated_, ensuring the CSS selectors continue to work correctly.

### 1️⃣ Row Background

```css
/* Row Background (Button-Based) */
.custom-class tr:has(td button[aria-label="High"]) { 
    background-color: #0b2b4f;
    color: #fff;
}

.custom-class tr:has(td button[aria-label="Medium"]) { 
    background-color: #1e4a6b;
    color: #fff;
}

```

### 2️⃣ Hover (Optional)

```css
/* Row Hover Override */
#page-root .custom-class tr:has(td button[aria-label="High"]):hover { 
    background-color: #1e4f7a;
}

#page-root .custom-class tr:has(td button[aria-label="Medium"]):hover { 
    background-color: #397095;
}

```

* * *

### 🔧 Optional — Make the Button Look Like Plain Text

```css
/* Disable pointer events on 4th column */
.custom-class td:nth-child(4) {
    pointer-events: none; 
}

/* Remove button background & border */
.custom-class td:nth-child(4) .bordered { 
    background: transparent;
    border: none;
    box-shadow: none; 
}

/* Remove hover effect on button */
.custom-class td:nth-child(4) .bordered:hover {
    background: transparent;
}

```

![Button Approach](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/da8367aeb4fb31869bdd058114a2233b60b4cc46.gif)

* * *

# 🧵 Part 2 — Color Rows via Image Fragment

> Reference: [**🔥 Advanced CSS Hack: Dynamic CSS in Glide 3**](https://community.glideapps.com/t/advanced-css-hack-dynamic-css-in-glide-3-badge-navigation-via-user-image-url-fragment/85688)

Instead of using a button, embed a fragment in the image URL:

```auto
https://example.com/icons/priority.png#High
https://example.com/icons/priority.png#Medium

```

_Use a Template column to combine the base URL and the fragment (e.g., Base URL + “#” + Status)._

### 1️⃣ Row Background

```css
/* Row Background (Image-Based) */
.custom-class tr:has(img[src$="#High"]) {
    background-color: #5b2c83;
    color: #fff;
}

.custom-class tr:has(img[src$="#Medium"]) {
    background-color: #7a3fb0;
    color: #fff;
}

```

### 2️⃣ Hover (Optional)

```css
#page-root .custom-class tr:has(img[src$="#High"]):hover {
    background-color: #6d3aa0;
}

#page-root .custom-class tr:has(img[src$="#Medium"]):hover {
    background-color: #8d52c7;
}

```

* * *

# 🧵 Part 3 — Color Rows via Boolean Column

Color rows based on a boolean column (true/false).

```css
/* True rows */
.custom-class tr:has(.true-boolean) {
    background-color: #2c7a7b;
    color: #fff;
}

/* False/default rows remain inherited */
.custom-class tr:not(:has(.true-boolean)) { 
    background-color: inherit;
    color: inherit;
}

/* Hover (Optional) */
#page-root .custom-class tr:has(.true-boolean):hover {
    background-color: #1f5550;
}

#page-root .custom-class tr:not(:has(.true-boolean)):hover {
    background-color: #e5e7eb;
}

```

 ![Boolean Approach](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/f/3f62594f2ca31185ddf445f33e566206b7977603.png)

* * *

# 🫣 Hide the Indicator Column — Optional

If you don’t want the indicator visible, hide the column afterward:

```css
/* Hide indicator column (example: 4th column) */
.custom-class td:nth-child(4) {
    display: none;
}

```

> Works for buttons, image fragments, or boolean indicators. Adjust the column index as needed.

* * *

# 💡 Tip & Trick — Target Cells or Elements

The same selector pattern can also be used to target specific cells or elements instead of the entire row.

After `:has()`, you can narrow the scope to a specific column (`td:nth-child(n)`) or even to elements inside the cell (such as buttons, links, images, etc.).

This provides flexibility to style rows, columns, or individual elements within matching rows.

---

<div class="post-metadata">

**Author:** ![Mazen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mazen/32/84042_2.png) [@Mazen](https://community.glideapps.com/u/Mazen)\
**Post date:** [February 27, 2026, 7:22pm UTC](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512/3 "2026-02-27T19:22:09Z")

</div>

That’s Amazing!  
Thank you for sharing.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 28, 2026, 11:37am UTC](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512/4 "2026-02-28T11:37:37Z")

</div>

Booooookmarked!

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [March 1, 2026, 2:21pm UTC](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512/5 "2026-03-01T14:21:09Z")

</div>

@glide formatting data table rows should be possible without resorting to CSS.

---

<div class="post-metadata">

**Author:** ![Mazen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mazen/32/84042_2.png) [@Mazen](https://community.glideapps.com/u/Mazen)\
**Post date:** [March 1, 2026, 9:36pm UTC](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512/6 "2026-03-01T21:36:54Z")

</div>

Agreed : ) @david .

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [March 2, 2026, 4:04am UTC](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512/7 "2026-03-02T04:04:58Z")

</div>

Yes, you’re right. This has already been requested by others in the community here:

> [@Glide tables and list, Color whole row background](https://community.glideapps.com/t/glide-tables-and-list-color-whole-row-background/86352):
>
> I would like to make a request to have an option to customize the wholebackground color of a row on lists and tables, based on its status, like the given below