CSS CSS中的交替表颜色行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS CSS中的交替表颜色行相关的知识，希望对你有一定的参考价值。
<style type="text/css">
/* technique 1 */
tbody tr:nth-child(odd){ background-color:#ccc; }
/* technique 2 */
TBODY TR.odd { background-color:#78a5d1; }
</style>
<table>
<tbody>
<tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
</tbody>
</table>
以上是关于CSS CSS中的交替表颜色行的主要内容，如果未能解决你的问题，请参考以下文章
使用css替换具有不一致类的表行颜色的方法[重复]
jQuery交替行颜色
如何让GridView的行颜色交替
如何在JSP中实现表格颜色交替出现
在 Internet Explorer 中使用交替的 CSS 表格行样式
css 使用CSS3的交替颜色的表列