漂亮的表格 | 码农工具

​x
 
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center" class="biaoti" height="60">受理员业务统计表</td>
  </tr>
  <tr>
    <td align="right" height="25">2017-01-02---2017-05-02</td>
  </tr>
</table>
​
<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
  <tr>
    <td colspan="2" class="btbg font-center titfont" rowspan="2">受理员</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">受理数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">自办数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td>
    <td colspan="2" class="btbg font-center titfont">拟办意见</td>
    <td colspan="2" class="btbg font-center titfont">返回修改</td>
    <td colspan="3" class="btbg font-center titfont">工单类型</td>
  </tr>
  <tr>
    <td width="8%" class="btbg font-center">同意</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">数量</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">建议件</td>
    <td width="8%" class="btbg font-center">诉求件</td>
    <td width="8%" class="btbg font-center">咨询件</td>
  </tr>
  <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">受理处</td>
    <td width="7%"  class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
  </tr>
  <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">话务组</td>
    <td width="7%"  class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
  </tr>
</table>

HTML

xxxxxxxxxx
 
@charset "utf-8";
/* CSS Document */
.tabtop13 {
    margin-top: 13px;
}
.tabtop13 td{
    background-color:#ffffff;
    height:25px;
    line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
    font-family: 微软雅黑;
    font-size: 26px;
    font-weight: bold;
    border-bottom:1px dashed #CCCCCC;
    color: #255e95;
}
.titfont {
    
    font-family: 微软雅黑;
    font-size: 16px;
    font-weight: bold;
    color: #255e95;
    background: url(../images/ico3.gif) no-repeat 15px center;
    background-color:#e9faff;
}
.tabtxt2 {
    font-family: 微软雅黑;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    color:#327cd1;
}
.tabtxt3 {
    font-family: 微软雅黑;
    font-size: 14px;
    padding-left: 15px;
    color: #000;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 20px;
}

CSS