css实现销售业绩报表表格效果代码
代码语言:html
所属分类:表格
代码描述:css实现销售业绩报表表格效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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"> <style> .container table{width:1000px;text-align:center;border-color:#000;border-collapse:collapse}thead{color:#fff;background:#0070c0}tbody{font-size:14px}tbody td,th{padding:5px 0}.wid150{width:150px}.spe-td{font-weight:600} </style> </head> <body> <div class="container"> <h3>9天销售率总体表现</h3> <table border="1"> <thead> <tr> <th colspan="2" rowspan="2" class="wid150">分类</th> <th rowspan="2" class="wid80">目标</th> <th colspan="13">2020年表现</th> </tr> <tr class="each-col" id="one-part-th"> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> <th>YTD</th> </tr> </thead> <tbody> <tr> <td rowspan="3" class="spe-td">3天销售率</td> <td>别克</td> <td>50.0%</td> <td>28.4%</td> <td>25.5%</td> <td>29.3%</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>28.0%</td> </tr> <tr> <td>雪佛兰</td> <td>50.0%</td> <td>25.8%</td> <td>27.7%</td> <td>26.1%</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>26.5%</td> </tr> <tr> <td>凯蒂拉萨</td> <td>50.0%</td> <td>25.9%</td> <td>11.1%</td> <td>11.4%</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>16.3%</td> </tr> </tbody> </table> <h3>大区表现</h3> <table border="1"> <thead> <tr> <th rowspan="2" class="wid150">品牌</th> <th rowspan="2" class="wid80">大区</th> <th rowspan="2">目标</th> <th colspan="12">2020年月实际状态</th> </tr> <tr class="each-col" id="two-part-th"> <th>Jan</th> <th>Feb</th> <th>Mar</th> <th>Apr</th> <th>May</th> <th>Jun</th> <th>Jul</th> <th>Aug</th> <th>Sep</th> <th>Oct</th> <th>Nov</th> <th>Dec</th> </tr> </thead> <tbody> <tr> <td rowspan="8" class="spe-td">别克</td> <td>别克1区</td> <td.........完整代码请登录后点击上方下载按钮下载查看
网友评论0