Making a zebra pattern in ASPX Repeater

Question

I have a repeater in my webpage, and I would like to change the background colors. First one will be blue, second yellow, then blue and so on.. I have the below table but do not know how to implement a javascript or css on the repeater. Can anyone assist?

            <asp:Repeater ID="cevapgoruntuleyici" runat="server"
                OnItemDataBound="cevapgoruntuleyici_ItemDataBound">
                <ItemTemplate>
                    <table width="693" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
                        <tr>
                            <td colspan="2" class="style2">
                                <asp:Label ID="lblcevapno" runat="server"></asp:Label><br />
                                <br />
                                <asp:Label ID="lblcevapdetay" runat="server"></asp:Label></td>
                        </tr>
                        <tr>
                            <td width="344">
                                <asp:Label ID="lblcevaplayan" runat="server"></asp:Label>
                            </td>
                            <td width="343" class="style3">
                                <asp:Label ID="lblcevaptarih" runat="server"></asp:Label>
                            </td>
                            <tr>
                                <td>
                                    <asp:Label ID="CevapEk" Visible="false" runat="server" />
                                    <asp:Button ID="CevapEkIndir" Visible="false" runat="server" OnClick="CevapEkIndir_Click" />

                                </td>

                            </tr>
                        </tr>
                    </table>
                    <br />
                </ItemTemplate>
            </asp:Repeater>

Answer 1

There are multiple ways of doing this. I'll go over 2 of them.

Since you are using a Repeater control, you can define an <ItemTemplate>, which you've done. You can also define an< AlternatingItemTemplate>, which refers to the "odd" rows. Doing this, you can specify a background color or class.

<asp:Repeater ID="cevapgoruntuleyici" runat="server"
    OnItemDataBound="cevapgoruntuleyici_ItemDataBound">
    <ItemTemplate>
        <table width="693" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" **class="odd-row"**>
            ....
        </table>
        <br />
    </ItemTemplate>
    <AlternatingItemTemplate>
        <table width="693" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" **class="even-row"**>
            ....
        </table>
        <br />
    </AlternatingItemTemplate>
</asp:Repeater>

You could also use CSS to accomplish this, which would be much more simple if the row contents are exactly the same (you just want a different background color). Encapsulate the repeated tables in a main table and add a class to each table row of the new larger table.

tr:nth-child(even) {
    background-color: yellow;
}
tr:nth-child(odd) {
    background-color: blue;
}