Streaming live at 10am (PST)

Tabular data in CMS, coloring


I have a series of product, that all have data fields connected, that I need to display in tabular look.

So on a product page, I connect a data collection, where each line is a set of data.

I want to add a colored background to every other line. But how do I go about doing this?

Every other is achieved with CSS using pseudo elements nth-child.

For example if your lines are divs:

div.yourclass:nth-child(even) {background: #CCC}
div.yourclass:nth-child(odd) {background: #FFF}

Are you comfortable enough with custom code to try that by yourself, or can you make use of some guidance?

Hi Vincent.

Thanks. I do understand the nth-child class. But I am not sure how to get it into Webflow in my collection class, that pulls data from a “data”-collection onto a product collection. I just float text boxes at the moment, in a flex box container… I am not sure where to add the code.

Please provide your published page URL.
with password: tree

Still a wireframe, but that table is CMS data: one entry pr row.

Try this

.data-collection-list > div { background: #eee; }
.data-collection-list > div:nth-child(odd) { background: #fff; }