使用CSS的交替表行颜色？ [英] Alternate table row color using CSS?

问题描述

我使用包含此行的颜色的表格。

I am using a table with alternate row color with this.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

使用 tr 类，但我只想使用 table 。当我使用类的表比这适用于 tr 替代。

Here I am using class for tr, but I want to use only for table. When I use class for table than this apply on tr alternative.

我可以使用CSS写这样的HTML ？

Can I write my HTML like this using CSS?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

如何使用CSS使行具有斑马条纹？

How can I make the rows have "zebra stripes" using CSS?

推荐答案

有一个CSS选择器，真的是伪选择器，称为nth-child。在纯CSS中，您可以执行以下操作：

There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:

tr:nth-child(even) {
    background-color: #000000;
}

注意：IE 8不支持

或者，如果你有jQuery：

Or, if you have jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

这篇关于使用CSS的交替表行颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！