实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jj</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
table{
margin:100px auto;
text-align: center;
width: 60%;
background-color: #54b69d;
border-collapse:collapse;
border: 0;
background-image: url(../images/3.jpg);
box-shadow: 3px 5px 20px #888;
}
table caption{
color: #ffffff;
font-size:18px;
font-weight: bolder;
background-color:#54b69d;
padding: 10px;
box-shadow: 3px 6px 20px #888;
}
th.a{
background-color: #8cbab0;
color: #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #ffffff;
}
th.b{
background-color: #8cbab0;
color: #ffffff;
border-top:1px solid #ffffff;
}
th,td{
border: 0;
padding: 10px;
}
.item1{
background-color: #ffffff;
border: 0;
}
.item2{
background-color: #eeeeee;
border: 0;
}
.c{
background-color: #54b69d;
color: #ffffff;
padding: 0 30px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<caption>2018年度横评：六价位段平板拆解横评</caption>
<tr>
<th colspan="2" class="a">型号</th>
<th class="a">后壳与机身连接方式</th>
<th class="a">卡口数量/胶水数量</th>
<th class="b">接口处有无密封装置</th>
</tr>
<tr class="item1">
<td class="c">1</td>
<td >苹果IPad Air 2</td>
<td>胶黏方式</td>
<td>密封处所用胶水较多</td>
<td>无</td>
</tr>
<tr class="item2" >
<td class="c">2</td>
<td >HTC Nexus 9</td>
<td>卡口方式</td>
<td>共36个卡口</td>
<td>无</td>
</tr>
<tr class="item1">
<td class="c">3</td>
<td >原道W8S</td>
<td>卡口方式</td>
<td>共26个卡口</td>
<td>无</td>
</tr>
<tr class="item2">
<td class="c">4</td>
<td>蓝魔i9S</td>
<td>胶黏方式</td>
<td>少量双面胶</td>
<td>无</td>
</tr>
<tr class="item1">
<td class="c">5</td>
<td >五元素</td>
<td>胶黏方式</td>
<td>共23个卡口</td>
<td>无</td>
</tr>
<tr class="item2">
<td class="c">6</td>
<td>紫光电子</td>
<td>胶黏方式</td>
<td>共14个卡口</td>
<td>无</td>
</tr>
</table>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
