使用CSS的替代表格行颜色？

393

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替代。

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

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

如何使行使用CSS“斑马条纹”？

来源

2010-06-21 Kali Charan Rajput

我创建使用第n个孩子）所有可能的模式（演示 - http://xengravity.com/demo/nth-child/ – xengravity 2015-05-04 02:09:43

693

$(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>

有一个CSS选择器，一个真正的伪选择，被称为第n个孩子。在纯CSS，你可以做到以下几点：

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

注：在IE 8不支持

或者，如果您有jQuery的：

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

来源

2010-06-21 11:43:21

，因此也可以更改交替行的超链接颜色。我需要不同的超链接颜色，偶数行和奇数。谢谢 – 2013-02-08 04:30:15

下面是IE7/8的另一个解决方案：http://stackoverflow.com/questions/4742450/ – Kevin 2013-05-29 19:11:36

很好的答案！但仅供参考，还有另一个CSS选择器可以使用。 'tr：第n种（奇数/偶数）' – 2014-05-27 10:18:49

109

你有:nth-child()伪类：

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

在:nth-child()初期的browser support是有点差。这就是为什么设置class="odd"成为这样一个常见的技术。在2013年底，我很高兴地说IE6和IE7终于死了（或者生病足以停止关心），但IE8仍然在附近 - 幸运的是，这是the only exception。

来源

2010-06-21 11:41:40

三年多后和支持是相当好。 – 2013-12-04 15:09:43

首选答案，因为它不会将CSS应用于标头 – Mike 2015-06-01 15:51:22

但是，并非所有浏览器（ie 6-8, ff v3.0）都支持这些规则，因此大多数解决方案都回退到某种形式的javascript/jquery解决方案，以便将这些类添加到这些行的非空行兼容的浏览器来获得老虎条纹效果。

来源

2010-06-21 11:41:55 redsquare

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

来源

2010-06-21 11:43:34

+45

好吧我知道jQuery在这个网站上相当普遍，但不管你不应该发布jQuery没有解释。这个脚本不会自行工作。 – DisgruntledGoat 2010-06-21 12:36:39

能我写我的HTML这样使用 css？

当然可以，但是，那么你将不得不使用:nth-child()伪选择器（这虽然有有限的支持）：

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

来源

2010-06-21 11:45:24 Sarfraz

一个bg颜色正在工作，但第二个bg颜色不是。 – 2010-06-21 11:51:27

有一个相当简单的方法在PHP中做到这一点，如果我了解您的查询，我假设您使用PHP编码，并且您正在使用CSS和JavaScript来增强输出。

数据库的动态输出将携带for循环来遍历结果，然后将结果加载到表中。只是一个函数调用添加到这样的：

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

那么函数添加到网页或库文件：

function getbgc($trcount) 
{ 

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

}

现在，这个会动态色彩之间的每一个新交替生成的表格行。

这比用CSS搞砸更容易，它不适用于所有浏览器。

希望这会有所帮助。

来源

2013-03-13 16:06:11 mark

谢谢@mark。这不是修复该网站将在PHP，.net或简单的HTML。 – 2013-03-14 06:08:27

只需将以下内容添加到您的html代码（<head>），即可完成。

HTML：

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

比jQuery的例子更容易和更快。

来源

2014-03-21 19:33:49 bmich72

这应该是被接受的答案。尽可能地，CSS应该处理样式，而javascript可以用来处理其他事情。 – 2015-12-02 14:33:12

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

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

来源

2014-04-23 08:06:31

我们可以使用奇数和偶数的CSS规则和jQuery方法交替行的颜色

使用CSS

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

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

来源

2017-01-17 07:36:46

使用CSS的替代表格行颜色？

回答

相关问题