使用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>

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.

这里我用class表示tr，但我只想用for table。当我使用类作为表时，这个应用在tr备选中。

Can I write my HTML like this using CSS?

我能用CSS像这样写HTML吗?

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

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

如何使用CSS使行具有“斑马条纹”?

9 个解决方案

#1

704

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

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

有一个CSS选择器，一个伪选择器，叫做nth-child。在纯CSS中，你可以做到以下几点:

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

Note: No support in IE 8.

注意:IE 8不支持。

Or, if you have jQuery:

或者，如果你有jQuery

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

#2

113

You have the :nth-child() pseudo-class:

您有:nth-child()伪类:

table tr:nth-child(odd) td{
}
table tr:nth-child(even) td{
}

In the early days of :nth-child() its browser support was kind of poor. That's why setting class="odd" became such a common technique. In late 2013 I'm glad to say that IE6 and IE7 are finally dead (or sick enough to stop caring) but IE8 is still around—thankfully, it's the only exception.

在:nth-child()的早期，它的浏览器支持有点差。这就是为什么设置class="odd"成为一种常见的技术。在2013年末，我很高兴地说，IE6和IE7终于死了(或者已经病得不能再关心了)，但是IE8仍然存在——谢天谢地，它是唯一的例外。

#3

Just add the following to your html code (withing the <head>) and you are done.

只需将以下内容添加到html代码中(在中)，您就完成了。

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

Easier and faster than jQuery examples.

比jQuery示例更简单、更快。

#4

can i write my html like this with use css ?

我可以用css来写我的html吗?

Yes you can but then you will have to use the :nth-child() pseudo selector (which has limited support though):

是的，你可以，但是你必须使用:nth-child() pseudo selector(虽然支持有限):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

#5

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

#6

Most of the above codes won't work with IE version. The solution that works for IE+ other browsers is this.

以上大部分代码都不能使用IE版本。适用于IE+其他浏览器的解决方案是这样的。

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

#7

We can use odd and even CSS rules and jQuery method for alternate row colors

我们可以使用奇偶CSS规则和jQuery方法来替换行颜色

Using CSS

使用CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

Using jQuery

使用jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

#8

You can use nth-child(odd/even) selectors however not all browsers (ie 6-8, ff v3.0) support these rules hence why most solutions fall back to some form of javascript/jquery solution to add the classes to the rows for these non compliant browsers to get the tiger stripe effect.

您可以使用nth-child(奇数/偶数)选择器，但是并不是所有浏览器(ie 6-8, ff v3.0)都支持这些规则，因此大多数解决方案都采用某种形式的javascript/jquery解决方案，将类添加到这些不兼容的浏览器的行中，以获得tiger条带效果。

#9

There is a fairly easy way to do this in PHP, if I understand your query, I assume that you code in PHP and you are using CSS and javascript to enhance the output.

在PHP中有一种非常简单的方法来实现这一点，如果我理解您的查询，我假设您使用PHP编写代码，并且使用CSS和javascript来增强输出。

The dynamic output from the database will carry a for loop to iterate through results which are then loaded into the table. Just add a function call to the like this:

来自数据库的动态输出将携带一个for循环来迭代遍历结果，然后将结果加载到表中。只需向如下所示添加一个函数调用:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

then add the function to the page or library file:

然后将函数添加到页面或库文件中:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

Now this will alternate dynamically between colors at each newly generated table row.

现在，这将在每个新生成的表行的颜色之间动态地交替。

It's a lot easier than messing about with CSS that doesn't work on all browsers.

这比在所有浏览器上都不能使用的CSS要容易得多。

Hope this helps.

希望这个有帮助。

#1

704

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>