Css two colors in row

Get Started
1

i have seen on many site two different colors applied on the same tr
how is this possible
mean when row fetching data every time change color
like this one
http://www.songs.pk/indian/action_replayy_2010.html
and u can also see this example on the comments box

http://tv.desitvforum.net/index.php?option=com_content&task=view&id=77865&Itemid=86

2

one way to do it is to give alternate rows a different class, something like .oddrow and .evenrow, and apply different background colour styles to each class.

3

well i find some code on it but i and it work also fine
but i don’t have much concept how this all is working mean which conditions applying which function as there used % what’s doing this and how all function is work little explain this is code which we use in our loop

$trColor = 0;
$tr = (0 == $trColor % 2)? “#E8E8E8” : “#FFFFFF”;

4

so there is no misunderstanding, I am assuming you want different colours on alternate dynamically generated table rows.

if that is so, I normally do something like this.

 
<?php
 
while($row=mysql_fetch_assoc($rs)) {
       $rowClass = ($rowClass == 'evenRow')? 'oddRow' : 'evenRow';
       echo '<tr class="'.$rowClass.'">';
.
.
.
}
 
 
?>

and the css would be similar to

 
.evenRow {
    background-color: red;
}
 
.oddRow {
    background-color: green;
}
5

Use Grid View with formatting,for that this code may help you
<asp:GridView ID=“gvCustomres” runat=“server”
AutoGenerateColumns=“False”
AllowPaging=“true”
CssClass=“Grid1”
PagerStyle-CssClass=“pgr”
AlternatingRowStyle-CssClass=“alt”>
<Columns>
<asp:BoundField DataField=“CompanyName” HeaderText=“Company Name” />
<asp:BoundField DataField=“ContactName” HeaderText=“Contact Name” />
<asp:BoundField DataField=“ContactTitle” HeaderText=“Contact Title” />
<asp:BoundField DataField=“Address” HeaderText=“Address” />
<asp:BoundField DataField=“City” HeaderText=“City” />
<asp:BoundField DataField=“Country” HeaderText=“Country” />
</Columns>
</asp:GridView>

CSS

.Grid1 {
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse:collapse;
}
.Grid1 td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
}
.Grid1 th {
padding: 4px 2px;
color: #fff;
background: #424242 url(grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.Grid1 .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; }
.Grid1 .pgr { background: #424242 url(grd_pgr.png) repeat-x top; }
.Grid1 .pgr table { margin: 5px 0; }
.Grid1 .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.Grid1 .pgr a { color: #666; text-decoration: none; }
.Grid1 .pgr a:hover { color: #000; text-decoration: none; }

Change this code according your choice.