🟦 🟩 🟪 How to Color Rows in a Table Collection

Community Resources
,
1

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.

:thread: Part 1 — Color Rows via Button Column

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

:warning: 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.

:one: 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;
}

:two: 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;
}

:wrench: 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;
}

Button Approach

:thread: Part 2 — Color Rows via Image Fragment

Reference: :fire: 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).

:one: 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;
}

:two: 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;
}

:thread: 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;
}

Boolean Approach
Boolean Approach1141×425 65.4 KB

:face_with_peeking_eye: 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.

:light_bulb: 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.

3

That’s Amazing!
Thank you for sharing.

4

Booooookmarked!

5

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

6

Agreed : ) @david .

7

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