推荐table表格隔行变色

制作简单表格，代码如下： !DOCTYPE html html head meta charset=UTF-8 title/title style table,tr,td,th{ padding: 0; margin: 0; } table{ width: 100%; border-color: #ccc; } table tr{ line-height: 30px; border-color: #ccc; } table th

制作简单表格，代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

table,tr,td,th{

padding: 0;

margin: 0;

}

table{

width: 100%;

border-color: #ccc;

}

table tr{

line-height: 30px;

border-color: #ccc;

}

table th,table td{

text-align: center;

border-color: #ccc;

}

</style>

</head>

<body>

<table border="1" cellspacing="0">

<tr>

<th>1</th>

<th>2</th>

<th>3</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

</table>

</body>

</html>
2

表格样式为：
3

添加属性样式：

table tr:nth-child(odd){

background: #ccc;

}

结果如图所示可设置奇数行背景
4

当需要偶数行背景时使用样式：

table tr:nth-child(even){

background: #ccc;

}