<!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>
