html - 具有交替颜色行的 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;
}