🟦 🟩 🟪 How to Color Rows in a Table Collection

[Himaladin]

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.

Row Background

/* 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;
}

Hover (Optional)

/* 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

/* 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;
}

---

Part 2 — Color Rows via Image Fragment

Reference: Advanced CSS Hack: Dynamic CSS in Glide 3

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

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).

Row Background

/* 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;
}

Hover (Optional)

#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).

/* 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;
}

---

Hide the Indicator Column — Optional

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

/* 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.

[Mazen]

That’s Amazing!
Thank you for sharing.

[MaximeBaker]

Booooookmarked!