Excel合计表格样式效果

2017-06-06 09:55:59  访问(1599) 赞(0) 踩(0)

• 程序示例
• 内容
• 在线测试

•  <style>
         
  /*body {
  min-width: 3715px;
  width: expression_r( document.body.clientWidth < 3715 ? "3715px" : "auto" );
  }*/
  
  /*Table*/
  .GasOilStatTable {
  border:1px solid #dedede;
  width: 100%;
  border-collapse: collapse;
  font-size:12px;
  }
  /*Table标题*/
  .GasOilStatTable_title {
  font-weight: bold;
  font-size: 15px;
  height: 30px;
  }
  /*Table表头*/
  .GasOilStatTable_head {
  font-weight: bold;
  font-size: 13px;
  height: 28px;
  }
  /*Table正常单元行*/
  .GasOilStatTable_tr{
  height: 25px;
  }
  /*Table交替单元行*/
  .GasOilStatTable_x_tr {
  height: 25px;
  background:#f5f5f5;
  }
  /*Table_td*/
  .GasOilStatTable td{
  word-break: keep-all;
  white-space:nowrap;
  }
  /*Table_tr_td*/
  .GasOilStatTable tr td {
  text-align: center;
  border:1px solid #dedede;
  } 
  
  /*Table小计单元行*/
  .GasOilStatTable_depSubTotal_tr{
  height: 25px;
  background-color: rgba(22, 151, 233, 0.16);
  }
  /*Table合计单元行*/
  .GasOilStatTable_depTotal_tr{
  height: 25px;
  }
  /*Table总计单元行*/
  .GasOilStatTable_Total_tr {
      height: 30px;
      font-size: 14px;
      background: rgba(160, 155, 155, 0.56);
  }
  /*Table警告单元格td*/
  .GasOilStatTable_warnning_td{
  padding: 3px;
  background: rgba(255, 144, 0, 0.35);
  color: red;
  }
  
      </style>
  
   <table class="GasOilStatTable">
          <tr>
              <td colspan="4"  class="GasOilStatTable_title">标题</td>
          </tr>
          <tr class="GasOilStatTable_head">
              <td>表头</td>
              <td>列1</td>
              <td>列1</td>
              <td>列1</td>
          </tr>
          <tr class="GasOilStatTable_tr">
              <td>单元行</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_x_tr">
              <td>交替行</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_tr">
              <td>单元行</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_x_tr">
              <td>交替行</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_depSubTotal_tr">
              <td>小计</td>
              <td>12</td>
              <td class="GasOilStatTable_warnning_td">警告</td>
              <td>12</td>
          </tr>      
        
          <tr class="GasOilStatTable_tr">
              <td>单元行</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_x_tr">
              <td>交替行</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_tr">
              <td>单元行</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_x_tr">
              <td>交替行</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_depSubTotal_tr">
              <td>小计</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>       
          <tr class="GasOilStatTable_depTotal_tr">
              <td>合计</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
          <tr class="GasOilStatTable_Total_tr">
              <td>总计</td>
              <td>12</td>
              <td>12</td>
              <td>12</td>
          </tr>
      </table>
  

上一条：

下一条：

相关评论

发表评论

类型：	留言 建议 疑问
内容：
	(Alt+Enter)