Not sure if this is the place for this question. How do I assign alternating background colors on a table that is generated by repeat region? I know how to do it with CSS on static but not on dynamic tables.

Hello Joe,
You can do this with simple css as on a static table..
Add a class ".alternate-rows" to your table and then your css looks like:

.alternate-rows > tbody > tr:nth-child(odd) > td,
.alternate-rows > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

I must have something going on preventing the CSS from targeting the table. I have assigned the class "alternate-rows" to the table and added your CSS to the head section but not seeing anything. I'm not totally familiar with the table head, footer and body tags use.

Page is here: meltz.thorunndesignswebdev.com/price-lists-ghentwoodproducts/rough-cut-hemlock.php

<style type="text/css">
.alternate-rows > tbody > tr:nth-child(odd) > td,
.alternate-rows > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
</style>


<table width="100%" border="0" class="alternate-rows">
<thead> <tr>
<th width="10%" scope="col">Size</th>
<th width="10%" scope="col">6 inch</th>
<th width="10%" scope="col">8 inch</th>
<th scope="col">10 inch</th>
<th width="10%" scope="col">12 inch</th>
<th width="10%" align="center" scope="col">14 inch</th>
<th width="10%" scope="col">16 inch</th>
<th width="5%" scope="col">&nbsp;</th>
<th width="10%" scope="col">8-12 BF</th>
<th width="10%" scope="col">14-16 BF</th>
</tr></thead><tfoot></tfoot>

<tbody>
<tr>
<td width="10%" align="center"><div data-binding-id="repeat1" data-binding-repeat="RoughCutHemlock01.data">{{size}}</div></td>
<td width="10%" align="center"><div data-binding-id="repeat2" data-binding-repeat="RoughCutHemlock01.data">{{["6inch"]}}</div></td>
<td width="10%" align="center"><div data-binding-id="repeat3" data-binding-repeat="RoughCutHemlock01.data">{{["8inch"]}}</div></td>
<td width="10%" align="center"><div data-binding-id="repeat4" data-binding-repeat="RoughCutHemlock01.data">{{["10inch"]}}</div></td>
<td width="10%" align="center"><div data-binding-id="repeat5" data-binding-repeat="RoughCutHemlock01.data">{{["12inch"]}}</div></td>
<td width="10%" align="center"><div data-binding-id="repeat6" data-binding-repeat="RoughCutHemlock01.data">{{["14inch"]}}</div></td>
<td width="10%" align="center"><div data-binding-id="repeat7" data-binding-repeat="RoughCutHemlock01.data">{{["16inch"]}}</div></td>
<td width="5%" align="center">&nbsp;</td>
<td align="center"><div data-binding-id="repeat8" data-binding-repeat="RoughCutHemlock01.data" data-binding-html="{{[&quot;8-12bf&quot;]}}"></div></td>
<td width="10%" align="center"><div data-binding-id="repeat9" data-binding-repeat="RoughCutHemlock01.data" data-binding-html="{{[&quot;14-16bf&quot;]}}"></div></td>
</tr></tbody>
</table>

Well what i understood from your post is that you want to have different colored table ROWS and that's what the css i provided does.
In your table you currently have ONE row .. with several TDs with repeating divs inside the TDs.
What part of your table do you need to be different color exactly?

I started experimenting using the HTML5 Bindings to create a dynamic table (the rows are created from the database link) -- I believe I have it working correctly -- maybe I don't have it configured correctly. Previously, if I recall, there was a PHP server behavior that could be added to create alternate colored rows in a dynamic table. So, is there an equivalent for HTML5 Bindings?

The problem on your page is that you have ONE ROW. In this one row you have several TDs and repeating DIVs inside the TDs. You do not repeat the ROW in your table. That's why the css is not applied to the odd rows as they just do not exist..

ORIGINAL SIZE HERE

Ah, I see clearly now.

How do I target the row to be the repeating region? I've been able to get the entire table to repeat (including the head) but not just the row. I removed the extra repeat regions.

I noticed in some of the samples, it looks like tables were created using divs?

Hard to un-learn things that I've been doing for years.

If I move the repeat DIV to wrap the table, the entire table repeats -- but the info does appear from the database. I tried targeting just the row, but this doesn't work. I know I'm doing something wrong.

<table width="100%" border="0">
<tr>
<th width="10%" scope="col">Size</th>
<th width="10%" scope="col">6 inch</th>
<th width="10%" scope="col">8 inch</th>
<th scope="col">10 inch</th>
<th width="10%" scope="col">12 inch</th>
<th width="10%" align="center" scope="col">14 inch</th>
<th width="10%" scope="col">16 inch</th>
<th width="5%" scope="col">&nbsp;</th>
<th width="10%" scope="col">8-12 BF</th>
<th width="10%" scope="col">14-16 BF</th>
</tr>
<div data-binding-id="repeat1" data-binding-repeat="RoughCutHemlock01.data"> <tr>
<td width="10%" align="center">{{size}}</td>
<td width="10%" align="center">{{["6inch"]}}</td>
<td width="10%" align="center">{{["8inch"]}}</td>
<td width="10%" align="center">{{["10inch"]}}</td>
<td width="10%" align="center">{{["12inch"]}}</td>
<td width="10%" align="center">{{["14inch"]}}</td>
<td width="10%" align="center">{{["16inch"]}}</td>
<td width="5%" align="center">&nbsp;</td>
<td align="center"></td>
<td width="10%" align="center"></td>
</tr></div>
</table>

My apologies for going way off-topic on this thread.

Remove the repeat region you currently have on your page as well as all of the dynamic data. When creating the repeat region, select the <tr> tag (click it in the properties inspector) in the Bindt To: select tr.data.repeat then click the Bind button. This will repeat your row.

Got it! Working as expected!

Thanks!

There is a great solution from Miro for dynamic table rows:

<tr class="{{($oddeven == 1).then('info', ' ')}}" data-binding-repeat="{{Your.data}}" data-binding-id="repeat1">

where 'info' is the color scheme on bootstrap. I liked it because you don't need to change any css file.