html5中实现table表格中的歪线表头结果的5种做法-

table表格，这个东西大家确定都不生疏，代码中我们经常都能遇到，那么给table加一个歪线的表头有时是很有须要的，但是到底该怎么实现这种结果呢？ table表格，这个东西大家确定都不生疏，代码中我们经常都能遇到，那么给table加一个歪线的表头有时是很有须要的，但是到底该怎么实现这种结果呢？

我总结了下列几种办法：

1、最最最简略的做法

直接去寻企业的UI，让她做一张图片，作为配景图片放到这里，然后撑满就可以了。是不是很简略！！！

2、相当简略的做法

其实理解css3的伴侣，一看到这个结果，脑子中眨眼涌现的就是transform这个属性，是的，这个的确可以，也很简略，就是有一个题目要注意阅读器的兼容性题目，大家心里要要时刻维持着危机意识（IE还存在呢），要是你们企业的请求是只兼容chrome，那么，这个办法很适合你。

3、十分简略的做法

.biaoTou {
                border-top: 200px #199fff solid; /*上边框宽度等于表格首先行行高*/  
                border-left: 200px #ff8838 solid; /*左边框宽度等于表格首先行首先格宽度*/  
            }

这种办法也很简略，按照上面的格局写下来就好了。但是这种写法有个显明的题目：这种其实就是应用两种色彩的不一样的border划分表头的歪线的，歪线两边的色彩不克不及雷同，要是是做一些促销流动之类的表格时可以用这种办法。但是要是我们需要歪线两边的色彩同样时，这种做法是不适用的。慎用。

4、很简略的做法

这种结果其实还可以用css3的另一个新的标签canvas。将其作为画布画一条歪线是一种十分简略的做法，就不细致解释了，但是也有一个题目，就是陈词滥调的兼容性题目了，要是只是兼容chrome，你想怎么办都行（为何我们企业不断要考虑可恶的IE，我也想只做兼容谷歌的项目啊）。

5、不简略的做法

那就是js做法了

  
  
  
  
  
  
  
  
    
  
    
header
  
    
  
    
  
        
  
            
  
                    
  
                        
  
                        
成绩
  
                    
  
                    
  
                        
姓名
  
                        
  
                    
  
                
  
            
数学
  
            
英语
  
            
C说话
  
        
  
        
  
            
张三
  
            
55
  
            
66
  
            
77
  
        
  
        
  
            
李四
  
            
99
  
            
68
  
            
71
  
        
  
        
  
            
王五
  
            
33
  
            
44
  
            
55
  
        
  
    
  
    
    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！