备用表行颜色使用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 。 当我使用class表比这更适用于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？
$(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>
你有：nth-child（）伪类：
table tr:nth-child(odd) td{ } table tr:nth-child(even) td{ }
在早期的时候:nth-child()它的浏览器支持有点差。 这就是为什么设置class="odd"成为如此常见的技巧。 在2013年年底，我很高兴地说，IE6和IE7终于死了（或生病足以停止关心），但IE8仍然 – 幸好，这是唯一的例外 。
只需将以下内容添加到您的html代码（使用<head> ）即可完成。
HTML：
<style> tr:nth-of-type(odd) { background-color:#ccc; } </style>
比jQuery例子更容易和更快。
我可以用这样的CSS来写我的HTML吗？
是的，你可以但是然后你将不得不使用:nth-child()伪select器（虽然有限的支持）：
table.alternate_color tr:nth-child(odd) td{ /* styles here */ } table.alternate_color tr:nth-child(even) td{ /* styles here */ }
<script type="text/javascript"> $(function(){ $("table.alternate_color tr:even").addClass("d0"); $("table.alternate_color tr:odd").addClass("d1"); }); </script>
以上大部分代码都不适用于IE版本。 适用于IE +其他浏览器的解决scheme是这样的。
<style type="text/css"> tr:nth-child(2n) { background-color: #FFEBCD; } </style>
你可以使用nth-child（奇数/偶数）select器，但不是所有的浏览器（ 即6-8，ff v3.0 ）都支持这些规则，为什么大多数解决scheme回落到某种forms的javascript / jquery解决scheme，将类添加到这些不符合标准的浏览器会获得虎纹效果。
有一个相当简单的方法来做到这一点在PHP中，如果我理解你的查询，我假设你在PHP代码，你使用CSS和JavaScript来增强输出。
数据库的dynamic输出将携带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;}
}
现在这将在每个新生成的表格行上的颜色之间dynamic交替。
这比用CSS搞乱，在所有的浏览器上都行不通。
希望这可以帮助。
我们可以使用奇数和偶数的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>
