如何实现html表格里隔行换色_随笔

最简单普遍的做法，是对不一样的行设置不一样的CSS

<table><tr class='r1'>....</tr><tr class='r2'>....</tr><tr class='r1'>....</tr><tr class='r2'>....</tr><tr class='r1'>....</tr>.........</table>然后在样式表设置中对r1和r2设置不一样的背景色

.r1 { background-color:red}.r2 { background-color:blue}

最普遍的做法，是对不一样的行设置不一样的CSS

<table>

</table>

然后在样式表设置中对r1和r2设置不一样的背景色

.r1 { background-color:red}

.r2 { background-color:blue}

<style>

tr{ width: 200px height: 40px border:1px #000 solid display: block}

/* 双行颜色 */

tr:nth-child(2n){ background: red}

/* 单行颜色 */

tr:nth-child(2n+1){ background: yellow}

</style> <body>

</table>

</body>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/6140225.html

如何实现html表格里隔行换色

发表评论

评论列表（0条）