Table odd even td with multicolor

前端 未结 2 1229
太阳男子
太阳男子 2021-01-24 03:45

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*/
#         


        
相关标签:
2条回答
  • 2021-01-24 03:55

    Take a look on <colgroup> tag.

    0 讨论(0)
  • 2021-01-24 04:03

    Use this fragments:
    HTML changes:

            <tr>
                    <td class="blueh2">1</td>
                    <td class="blueh2">&#1777;&#1779;&#1785;&#1777;/&#1776;&#1780;/&#1779; &#1776;&#1785;:&#1780;&#1785;:&#1780;&#1783;</td>
                    <td class="blueh2">&#1777;&#1779;&#1785;&#1777;/&#1776;&#1780;/&#1779; &#1777;&#1778;:&#1777;&#1785;:&#1780;&#1776;</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 changes:

    #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;
    }
    

    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 */
    

    etc.

    0 讨论(0)
提交回复
热议问题