Table Odd Even Td With Multicolor

I have a table styled with CSS with even and odd. The td even/odd CSS codes: #table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/ #table_box tr:nth-child(even) td

Solution 1:

Use this fragments: HTML changes:

<tr><tdclass="blueh2">1</td><tdclass="blueh2">&#1777;&#1779;&#1785;&#1777;/&#1776;&#1780;/&#1779;&#1776;&#1785;:&#1780;&#1785;:&#1780;&#1783;</td><tdclass="blueh2">&#1777;&#1779;&#1785;&#1777;/&#1776;&#1780;/&#1779;&#1777;&#1778;:&#1777;&#1785;:&#1780;&#1776;</td><tdclass="greenh2">2.5</td><tdclass="greenh2">2.5</td><tdclass="purpleh2">6.75MB</td><tdclass="purpleh2">54.13MB</td><tdclass="purpleh2">60.87MB</td><tdclass="purpleh2">60.87MB</td></tr>

CSS changes:

#table_boxtr:nth-child(odd) td { background-color:#ffffff } /*odd*/#table_boxtr:nth-child(even) td.greenh2 { background-color:#f00} /* even*/#table_boxtr:nth-child(even) td.blueh2 { background-color:#0f0} /* even*/#table_boxtr:nth-child(even) td.purpleh2 { background-color:#00f} /* even*/#table_boxtr:hovertd { background-color:#fffbae; } /* hovering */th.grey{
color:#7c7c7c!important;
}
th.blueh{
background-color:#174797;
color:#FFF!important;
}
th.blueh2{
background-color:#5492cf;
color:#FFF!important;
padding:3px!important;
}
th.greenh{
background-color:#579f0f;
color:#FFF!important;
}
th.greenh2{
background-color:#a4dd4f;
color:#FFF!important;
padding:3px!important;
}
th.purpleh{
background-color:#8e04ca;
color:#FFF!important;
}
th.purpleh2{
background-color:#d984fd;
color:#FFF!important;
padding:3px!important;
}

You'll need to tweak it some more to fit your desired output, but I guess the general idea is clear. You could also do it with plain CSS without changing your HTML code if you want:

#table_boxtr:nth-child(odd) td { background-color:#ffffff } /*odd*/#table_boxtr:nth-child(even) td:nth-child(1) { background-color:#f00} /* even*/#table_boxtr:nth-child(even) td:nth-child(2) { background-color:#0f0} /* even*/#table_boxtr:nth-child(even) td:nth-child(3) { background-color:#00f} /* even*/#table_boxtr:hovertd { background-color:#fffbae; } /* hovering */

etc.

Solution 2:

Take a look on <colgroup> tag.