html2canvas截取table合并单元格rowspan失效问题

1.表格定义

    <table id="table" class="tableTitle">                            
		<tr>                         
             <td>序号</td>	  
             <td>项目</td>   	               
             <td>工作要求</td>	  
             <td>是/否</td>	
             <td>得分</td>	
		</tr>       
		<tr>
             <td rowspan="5">1</td>	   
             <td rowspan="5"><span style="width:100%;height:100%">路网运行监测系统</span></td>	
             <td>是否开展相关工作</td>	   
             <td>      
                 <div id="field1" name="field1" class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical" 
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                           
             </td>	         
             <td rowspan="5"><input name="field6" id="field6" class="mini-textbox inputStyle" enabled="false"/></td>	     
		</tr>    
		<tr>
             <td>是否实现部省应用系统互联互通</td>	   
             <td>  
                 <div id="field2" name="field2"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                      
             </td>	
		</tr>  
		<tr>
             <td>系统数据是否能覆盖全省普通国省道范围</td>	   
             <td> 
                 <div id="field3" name="field3"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                       
             </td>	
		</tr> 
		<tr>
             <td>系统功能是否适用</td>	   
             <td>
                 <div id="field4" name="field4"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	
		</tr>  
		<tr>
             <td>系统是否具有先进性</td>	   
             <td>
                 <div id="field5" name="field5"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	
		</tr>   
		<tr>
             <td rowspan="5">2</td>	
             <td rowspan="5">省级综合养护管理系统</td>	
             <td>是否开展相关工作</td>	   
             <td>
                 <div id="field7" name="field7"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	  
             <td rowspan="5"><input name="field12" id="field12" class="mini-textbox inputStyle" enabled="false"/></td>	
		</tr> 
		<tr>
             <td>是否实现路况评定功能</td>	   
             <td>
                  <div id="field8" name="field8"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	
		</tr>  
		<tr>
             <td>是否实现养护需求分析功能</td>	   
             <td>
                  <div id="field9" name="field9"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	
		</tr> 
		<tr>
             <td>是否实现建立养护项目库功能</td>	   
             <td>
                  <div id="field10" name="field10"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	
		</tr>  
		<tr>  
             <td>系统是否具有先进性</td>	   
             <td>
                  <div id="field11" name="field11"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	
		</tr>  
		<tr>
             <td rowspan="2">3</td>	
             <td rowspan="2">智慧公路建设</td>	
             <td>是否开展相关工作</td>	   
             <td>
                  <div id="field13" name="field13"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	  
             <td rowspan="2"><input name="field15" id="field15" class="mini-textbox inputStyle" enabled="false"/></td>	
		</tr>   
		<tr>
             <td>是否取得一定成效</td>	      
             <td>   
                  <div id="field14" name="field14"  class="mini-radiobuttonlist" repeatItems="1" repeatLayout="table" repeatDirection="vertical"
                    data="[{'id':'1','text': '是'},{'id':'2','text': '否'}]" textField="text" valueField="id" onvaluechanged="valueChange()" ></div>                                
             </td>	
		</tr>               
	 </table>      

2.表格样式设置


/*设置表格头部样式*/
.tableTitle{        
	width:100%;
	border-collapse:collapse;
	border:1px solid #000000;
}    
    
/*设置表格行样式*/
.tableTitle tr{          
	border:1px solid #000000
}  

/*设置表格列样式*/
.tableTitle td{        
	border:1px solid #000000 ;
	width:70px;
	text-align:center;
	height:35px;
	line-height:35px; 
	color:black
}  

/*设置输入框样式*/
.inputStyle{        
	width:97%;
	margin:5px
}  

/*设置文本输入框表格样式*/
.textareaTd{        
	border:1px solid #000000 ;
	text-align:center;
	height:45px;
	line-height:45px;
}  

/*设置单选框表格样式*/
.mini-radiobuttonlist table{
    border:0px;  
    margin:auto;
    padding:auto;
 }  
  
/*设置单选框表格行样式*/
.mini-radiobuttonlist table tr{          
	border:0px solid #000000
}  

/*设置单选框表格列样式*/
.mini-radiobuttonlist table td{        
	border:0px solid #000000 ;
	width:120px;  
	text-align:center;  
	height:35px;
	line-height:35px; 
	color:black;
	vertical-align:middle;  
}                   

3.页面表格,带合并显示

4.生成的图片,不认rowspan

5.原因分析:给table的tr设置过样式,去掉tr的样式即可.tableTitle tr

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值