html css table 设置表头背景色、奇偶背景色

效果

如下:

css

table{
    /* 不加此样式,边框显示黑线 */
    border-collapse: collapse;
}

table thead{
    background-color: rgb(0, 186, 255);
}

/*设置奇数行样式,odd奇数*/
table tbody tr:nth-child(even){
    background-color: blue;
}
/*设置偶数行样式,even偶数*/
table tbody tr:nth-child(odd){
    background-color: green;
}

html

<table align="center">
    <thead>
        <tr height="20">
            <td width="30" align="center">#</td>
            <td width="40">姓名</td>
            <td width="40">类型</td>
            <td width="40">开门</td>
            <td width="70">时间</td>
        </tr>
    </thead>
    <tbody>
        <tr height="35">
            <td align="center">1</td>
            <td>李雷</td>
            <td>业主</td>
            <td>app</td>
            <td>2023-12-12</td>
        </tr>
        <tr height="35">
            <td align="center">2</td>
            <td>韩梅梅</td>
            <td>业主</td>
            <td>app</td>
            <td>2023-12-12</td>
        </tr>
        <tr height="35">
            <td align="center">3</td>
            <td>lucy</td>
            <td>业主</td>
            <td>app</td>
            <td>2023-12-12</td>
        </tr>
        <tr height="35">
            <td align="center">4</td>
            <td>lili</td>
            <td>业主</td>
            <td>app</td>
            <td>2023-12-12</td>
        </tr>

        <tr height="35">
            <td align="center">5</td>
            <td>李雷</td>
            <td>业主</td>
            <td>app</td>
            <td>2023-12-12</td>
        </tr>
        <tr height="35">
            <td align="center">6</td>
            <td>韩梅梅</td>
            <td>业主</td>
            <td>app</td>
            <td>2023-12-12</td>
        </tr>
        <tr height="35">
            <td align="center">7</td>
            <td>lucy</td>
            <td>业主</td>
            <td>app</td>
            <td>2023-12-12</td>
        </tr>
        <tr height="35">
            <td align="center">8</td>
            <td>lili</td>
            <td>业主</td>
            <td>app</td>
            <td>2023-12-12</td>
        </tr>
    </tbody>
</table>

原文出处:/show_1IX6lZqEdmvP.html