<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
<style>
table caption{
font-size: 28px;
font-weight: bold;
margin:20px 0;
}
table{
width: 100%;
text-align: center;
border-collapse: collapse;
}
td,th{
border: 1px solid #e6e6e6;
height: 50px;
}
table thead{
background: #49638c;font-weight: bold;color: white
}
table th:nth-child(1),td:nth-child(1){
width: 10%;
}
table th:nth-child(2),td:nth-child(2){
width: 20%;
}
table th:nth-child(3),td:nth-child(3){
width: 30%;
}
table th:nth-child(4),td:nth-child(4){
width: 20%;
}
table th:nth-child(5),td:nth-child(5){
width: 20%;
}
table tbody tr:nth-child(2n-1){
background: #ececec;
}
table tbody tr:nth-child(2n){
color: #7e939e;
}
table tbody tr:nth-child(2n-1){
color: #775a5a;
}
table tbody tr:hover{
background: #c7c2f5;
}
table tfoot{
background: #49638c;
font-weight: bold;
color: white;
text-align: right;
}
</style>
</head>
<body>
<table>
<caption>某某某数据</caption>
<thead>
<tr>
<th>数据1</th>
<th>数据2</th>
<th>数据3</th>
<th>数据4</th>
<th>数据5</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tfoot>
<tr>
/*clspan为合并行*/
<td colspan="4">表尾统计1</td>
<td>数据2</td>
<!-- <td>数据3</td>
<td>数据4</td>
<td>数据5</td> -->
</tr>
<tr>
<td colspan="4">表尾统计1</td>
<td>数据2</td>
<!-- <td>数据3</td>
<td>数据4</td>
<td>数据5</td> -->
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>