效果
如下:
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>
