html中表格怎么实现隔行变色

html-css017

html中表格怎么实现隔行变色,第1张

最普遍的做法，是对不一样的行设置不一样的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><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}

<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 border="0">

         <tr></tr>

         <tr></tr>

         <tr></tr>

         <tr></tr>

        </table>

</body>