table 基础布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .table { border-top: 1px solid #999; border-left: 1px solid #999; border-spacing: 0; /*去掉单元格间隙*/ } .table td { padding: 10px 30px; border-bottom: 1px solid #999; border-right: 1px solid #999; } .item { /* border: solid 1px red; */ width: 20vw; text-align: center; } .row .item:hover{ background-color: antiquewhite; cursor: pointer; } </style> </head> <body> <table class="table"> <thead> <tr > <td class="item item1"> 分类</td> <td class="item" colspan="2">产品分类1</td> <td class="item" colspan="2">产品分类2</td> </tr> </thead> <tr class="row"> <td class="item" rowspan="3">A类数据</td> <td class="item">1-2</td> <td class="item">1-3</td> <td class="item">1-4</td> <td class="item">1-5</td> </tr> <tr class="row"> <td class="item">2-1</td> <td class="item">2-2</td> <td class="item">2-3</td> <td class="item">2-4</td> </tr> <tr class="row"> <td class="item">3-1</td> <td class="item">3-2</td> <td class="item">3-3</td> <td class="item">3-4</td> </tr> <tr class="row"> <td class="item" rowspan="3">B类数据</td> <td class="item">1-2</td> <td class="item">1-3</td> <td class="item">1-4</td> <td class="item">1-5</td> </tr> <tr class="row"> <td class="item">2-1</td> <td class="item">2-2</td> <td class="item">2-3</td> <td class="item">2-4</td> </tr> <tr class="row"> <td class="item">3-1</td> <td class="item">3-2</td> <td class="item">3-3</td> <td class="item">3-4</td> </tr> </table> </body> </html>
Document
| 分类 | 产品分类1 | 产品分类2 | ||
| A类数据 | 1-2 | 1-3 | 1-4 | 1-5 |
| 2-1 | 2-2 | 2-3 | 2-4 | |
| 3-1 | 3-2 | 3-3 | 3-4 | |
| B类数据 | 1-2 | 1-3 | 1-4 | 1-5 |
| 2-1 | 2-2 | 2-3 | 2-4 | |
| 3-1 | 3-2 | 3-3 | 3-4 | |
