表奇偶TD与多色 [英] Table odd even td with multicolor
本文介绍了表奇偶TD与多色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个样式为CSS的表,具有偶数和奇数。 td
偶/奇CSS代码:
I have a table styled with CSS with even and odd. The td
even/odd CSS codes:
#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 */
我想具有多种偶数/奇数行样式,如下图所示:
I want to have multi even/odd color rows styles like the below image:
我可以用CSS做到这一点?我正在尝试这样做,但是颜色不显示,只是样式偶/奇。
Can I do this with CSS? I was trying to do it but colors don't show and just even/odd styled.
推荐答案
使用以下片段:
HTML更改:
Use this fragments:
HTML changes:
<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代码:
You'll need to tweak it some more to fit your desired output, but I guess the general idea is clear.
You could also do it with plain CSS without changing your HTML code if you want:
#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 */
等。
这篇关于表奇偶TD与多色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文