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: Button column (aria-label) — reads the button’s aria-label to determine row color. Image fragment in the src — adds a fragment to the image URL (e.g., #High). 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 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] :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.

That’s Amazing! Thank you for sharing.

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

Yes, you’re right. This has already been requested by others in the community here: [image] Glide tables and list, Color whole row background Feature Requests 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 [image]

🟦 🟩 🟪 How to Color Rows in a Table Collection

Community Resources

Himaladin March 2, 2026, 4:04am 7

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

Topic		Replies	Views
Glide tables and list, Color whole row background Feature Requests	9	218	February 27, 2026
How do I highlight a list or table row? Ask for Help	3	329	March 6, 2026
Colored Items in Table? Custom CSS/ new Feature Ask for Help custom-css , collections	6	226	February 7, 2025
Change Table Row Color Conditionally CSS? Ask for Help	4	407	June 19, 2024
Alternating the background of rows in collection Ask for Help collections	1	153	April 7, 2024

🟦 🟩 🟪 How to Color Rows in a Table Collection

Related topics