我有一个用 CSS 设计的表格,其中包含偶数和奇数. The td
偶数/奇数 CSS 代码:
#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td { background-color:#f5f9fa } /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */
![enter image description here](https://i.stack.imgur.com/ddJAj.jpg)
I want to have multi even/odd color rows styles like the below image:
![enter image description here](https://i.stack.imgur.com/1X2KC.jpg)
我可以用 CSS 做到这一点吗?我试图这样做,但颜色不显示,只是偶数/奇数样式。
使用这个片段:
HTML 更改:
<tr>
<td class="blueh2">1</td>
<td class="blueh2">۱۳۹۱/۰۴/۳ ۰۹:۴۹:۴۷</td>
<td class="blueh2">۱۳۹۱/۰۴/۳ ۱۲:۱۹:۴۰</td>
<td class="greenh2">2.5</td>
<td class="greenh2">2.5</td>
<td class="purpleh2">6.75MB</td>
<td class="purpleh2">54.13MB</td>
<td class="purpleh2">60.87MB</td>
<td class="purpleh2">60.87MB</td>
</tr>
CSS 更改:
#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td.greenh2 { background-color:#f00} /* even*/
#table_box tr:nth-child(even) td.blueh2 { background-color:#0f0} /* even*/
#table_box tr:nth-child(even) td.purpleh2 { background-color:#00f} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */
th.grey{
color:#7c7c7c!important;
}
th.blueh{
background-color:#174797;
color:#FFF!important;
}
th.blueh2{
background-color:#5492cf;
color:#FFF!important;
padding:3px!important;
}
th.greenh{
background-color:#579f0f;
color:#FFF!important;
}
th.greenh2{
background-color:#a4dd4f;
color:#FFF!important;
padding:3px!important;
}
th.purpleh{
background-color:#8e04ca;
color:#FFF!important;
}
th.purpleh2{
background-color:#d984fd;
color:#FFF!important;
padding:3px!important;
}
您需要对其进行更多调整以适应您所需的输出,但我想总体思路是明确的。
如果您愿意,您也可以使用纯 CSS 来完成此操作,而无需更改 HTML 代码:
#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td:nth-child(1) { background-color:#f00} /* even*/
#table_box tr:nth-child(even) td:nth-child(2) { background-color:#0f0} /* even*/
#table_box tr:nth-child(even) td:nth-child(3) { background-color:#00f} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */
etc.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)