使用CSS替代表行颜色?

我使用的表与交替行颜色与此。

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

我可以写我的HTML像这样使用CSS吗?

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

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

780645 次浏览
小开

你有:nth-child()伪类:

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

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

小开

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

小开
最佳答案 

$(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 -child。在纯CSS中，你可以做到以下几点:

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

IE 8不支持。

或者，如果你有jQuery:

$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
小开 
<script type="text/javascript">
$(function(){
$("table.alternate_color tr:even").addClass("d0");
$("table.alternate_color tr:odd").addClass("d1");
});
</script>
小开

我可以写我的HTML像这样使用 css ? < / p >

是的，你可以，但你必须使用:nth-child()伪选择器(它有有限的支持):

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

在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要容易得多。

希望这能有所帮助。

小开

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

HTML:

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

比jQuery示例更简单、更快。

小开

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

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

我们可以使用奇数和偶数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>

小开

请尝试这种方式:它可以在超文本标记语言文件中用于WebView

<head>
    

<style>
table {
border-collapse: collapse;
width: 100%;
}
          

th, td {
text-align: left;
padding: 8px;
}
          

tr:nth-child(even) {
background-color: Lightgreen;
}
</style>
</head>

提交答案