知识点：
border-collapse:collapse;/*合并边框线*/
tr:nth-child(even){
background-color:#f2f2f2; /*设置表格偶数行的背景色*/
}
tr:hover{
background-color:#ddd; /*当鼠标移到行的时候改变颜色*/
}
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
table,td,th{
border:1px solid black;
text-align:center;
border-collapse:collapse;/*合并边框线*/
font-family:Arial,Helvetica,sans-serif;
}
td,th{
width:100px;
}
th{
background-color:green;
color:white;
}
tr:nth-child(even){
background-color:#f2f2f2; /*设置表格偶数行的背景色*/
}
tr:hover{
background-color:#ddd; /*当鼠标移到行的时候改变颜色*/
}
</style>
</head>
<body>
<h1>css表格实例</h1>
<table>
<tr>
<th>名称</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<tr>
<td>苹果</td>
<td>100</td>
<td>4</td>
<td>400</td>
</tr>
<tr>
<td>香蕉</td>
<td>152</td>
<td>2.5</td>
<td>380</td>
</tr>
<tr>
<td>桔子</td>
<td>161</td>
<td>3.5</td>
<td>563.5</td>
</tr>
<tr>
<td>火龙果</td>
<td>151</td>
<td>6</td>
<td>906</td>
</tr>
<tr>
<td>哈密瓜</td>
<td>54</td>
<td>4.5</td>
<td>243</td>
</tr>
<tr>
<td>龙眼</td>
<td>215</td>
<td>10</td>
<td>2150</td>
</tr>
<tr>
<td>荔枝</td>
<td>15</td>
<td>8</td>
<td>120</td>
</tr>
</table>
</body>
</html>
运行效果：
评论