dom:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/table.css"/>
</head>
<body>
<table id="customers">
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td rowspan="3" class="bg-img">
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
</tr>
<tr class="alt">
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
样式:
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 90%;
border-collapse: collapse;
/* border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开 */
border: 8px solid green;
/* 指定CSS表格边框,使用border属性。 */
}
caption {
caption-side: bottom;
}
table .bg-img{
background: url(http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg) yellow no-repeat center center;
background-size: 25% 50%;
}
table td,
table th {
font-size: 16px;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
height: 50px;
text-align: left;
vertical-align: center;/* 垂直对齐 */
width:33%;
}
table th {
font-size: 18px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
table tr.alt td {
color: #000000;
background-color: #EAF2D3;
}
table tr:hover{
background-color: lightpink;
}