CSS表与交替颜色行

Question

你好我想知道是否有可能与一个CSS表有交替颜色行？我想它这个样子，

http://i.imgur.com/zT04atv.jpg

到目前为止我的代码的表是这样的。我已经尝试过，但似乎无法得到它的工作。这可能吗？如果是的话，我会如何执行它？谢谢。

<table style="height: 448px;" width="1007"> 
<tbody> 
<tr> 
<td style="text-align: center;"> 
<p>Pricing</p> 
<p>Structure</p> 
</td> 
<td style="text-align: center;"> 
<p>Professional</p> 
<p>Resume</p> 
<p>$199</p> 
</td> 
<td style="text-align: center;"> 
<p>Managerial</p> 
<p>Resume</p> 
<p>$299</p> 
</td> 
<td style="text-align: center;"> 
<p>Executive</p> 
<p>Resume</p> 
<p>$399</p> 
</td> 
<td style="text-align: center;"> 
<p>C-Suite</p> 
<p>Resume</p> 
<p>$499</p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;">Resume Specs</td> 
<td style="text-align: center;">2-3 pg resume</td> 
<td style="text-align: center;">4-5 pg resume</td> 
<td style="text-align: center;"> 
<p>+ cover sheet and</p> 
<p>graphics</p> 
</td> 
<td style="text-align: center;">+ standalone bio pg</td> 
</tr> 
<tr> 
<td style="text-align: center;">Phone Interview</td> 
<td style="text-align: center;">Tick</td> 
<td style="text-align: center;">Tick</td> 
<td style="text-align: center;">Tick</td> 
<td style="text-align: center;"> 
<p>Tick</p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;">Draft To Approve</td> 
<td style="text-align: center;">Tick</td> 
<td style="text-align: center;">Tick</td> 
<td style="text-align: center;">Tick</td> 
<td style="text-align: center;">Tick</td> 
</tr> 
<tr> 
<td style="text-align: center;">Template Options</td> 
<td style="text-align: center;"> </td> 
<td style="text-align: center;"> </td> 
<td style="text-align: center;">Tick</td> 
<td style="text-align: center;">Tick</td> 
</tr> 
<tr> 
<td style="text-align: center;">Extras</td> 
<td style="text-align: center;"> </td> 
<td style="text-align: center;"> </td> 
<td style="text-align: center;"> 
<p>+ Free LinkedIn</p> 
<p>profile</p> 
</td> 
<td style="text-align: center;"> 
<p>+ Free LinkedIn</p> 
<p>profile</p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;">Delivery</td> 
<td style="text-align: center;"> 
<p>.docx &amp; .pdf</p> 
<p>versions</p> 
</td> 
<td style="text-align: center;"> 
<p>.docx &amp; .pdf</p> 
<p>versions</p> 
</td> 
<td style="text-align: center;"> 
<p>.docx &amp; .pdf</p> 
<p>versions</p> 
</td> 
<td style="text-align: center;"> 
<p>.docx &amp; .pdf</p> 
<p>versions</p> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;">Cover Letter</td> 
<td style="text-align: center;">+ $50</td> 
<td style="text-align: center;">+ $50</td> 
<td style="text-align: center;">+ $50</td> 
<td style="text-align: center;">+ $50</td> 
</tr> 
<tr> 
<td style="text-align: center;"> 
<p>If your not sure where</p> 
<p>your job would fit, please</p> 
<p>get in touch to discuss </p> 
<p>your arrangements</p> 
</td> 
<td style="text-align: center;"> 
<p>Vocations (such as</p> 
<p>teaching &amp; nursing)</p> 
<p>Early career professionals</p> 
</td> 
<td style="text-align: center;"> 
<p>Managers and Senior</p> 
<p>professionals (lawyers,</p> 
<p>medical doctors), BDM's</p> 
<p>consultants...</p> 
</td> 
<td style="text-align: center;"> 
<p>Senior Managers and Exec</p> 
<p>Directors (Operations</p> 
<p>Managers, GMs, Head of</p> 
<p>Department</p> 
</td> 
<td style="text-align: center;"> 
<p>CEOs, CFOs, COOs, CIOs,</p> 
<p>Managing Directors, Board</p> 
<p>Members &amp; Non-Execs,</p> 
<p>Practice Directors &amp; Principals</p> 
</td> 
</tr> 
</tbody> 
</table> 

Answer 1

您可以使用允许将样式放置到选择器的奇数或偶数元素的CSS3。

td:nth-child(odd) { 
    background: #ff0000; 
} 

td:nth-child(even) { 
    background: #0000ff; 
}