html table表格斜线表头的实现方法总汇

在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法：

1、UI背景图实现

直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！

2、 css3中transform属性

其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的兼容性问题，大家心里要要时刻保持着危机意识（IE还存在呢），如果你们公司的要求是只兼容chrome，那么，这个方法很适合你。

3、利用border-top和border-left

这种方法也很简单，但是这种写法有个明显的问题：这种其实就是利用两种颜色的不同的border划分表头的斜线的，斜线两边的颜色不能相同，如果是做一些促销活动之类的表格时可以用这种方法。但是如果我们需要斜线两边的颜色一样时，这种做法是不适用的。

css:

 1 table {  
 2     border-collapse: collapse;  
 3     border: 1px #eee solid;  
 4      80%;  
 5     min- 300px;
 6     margin: 0 auto;    
 7 }  
 8 th{  
 9     border: 1px solid #ddd;  
10     text-align: center;  
11     height: 100px;
12 }  
13 .th_head{/*宽高100px,100px*/
14     200px;
15     position: relative; 
16 }  
17 .box{  
18     border-top: 100px #ff0 solid;  /*上边框宽度等于表格第一行行高*/  
19     border-left: 200px #0ff solid;  /*左边框宽度等于表格第一行第一格宽度*/  
20 }  
21 .a,.b{
22     font-style: normal;  
23     display: block;  
24     position: absolute;  
25      200px;
26     height: 50px;
27     line-height: 50px;
28 }
29 .a{
30     top: 0px;  left: 0px;   
31 }  
32 .b{   
33     top: 50px;  left: 0px;     
34 }  
35 </style>

设计坞https://www.wode007.com/sites/73738.html

html:

 1 <table>  
 2     <tr>  
 3         <th class="th_head">  
 4             <div class="box">  
 5                 <em class="a">A</em>
 6                 <em class="b">B</em>  
 7             </div>  
 8         </th>  
 9         <th>C</th>    
10     </tr>   
11 </table>

4、css3的canvas

这种效果其实还可以用css3的另一个新的标签canvas。将其作为画布画一条斜线是一种十分简单的做法，就不详细解释了，但是也有一个问题，就是老生常谈的兼容性问题了，如果只是兼容chrome，你想怎么办都行（为什么我们公司一直要考虑可恶的IE，我也想只做兼容谷歌的项目啊）。

5、js的实现

 1 <TABLE border=0 bgcolor="000000" cellspacing="1" width=400  
 2         style="margin-left: 100px;">  
 3         <TR bgcolor="FFFFFF">  
 4             <TD width="111" height="52"><table width="100%" height="100%"  
 5                     border="0" cellpadding="0" cellspacing="0">  
 6                     <tr>  
 7                         <td id="td1"></td>  
 8                         <td>成绩</td>  
 9                     </tr>  
10                     <tr>  
11                         <td>姓名</td>  
12                         <td id="td2"></td>  
13                     </tr>  
14                 </table></TD>  
15             <TD width="81">数学</TD>  
16             <TD width="96">英语</TD>  
17             <TD width="99">C语言</TD>  
18         </TR>  
19         <TR bgcolor="FFFFFF">  
20             <TD>张三</TD>  
21             <TD>55</TD>  
22             <TD>66</TD>  
23             <TD>77</TD>  
24         </TR>  
25         <TR bgcolor="FFFFFF">  
26             <TD>李四</TD>  
27             <TD>99</TD>  
28             <TD>68</TD>  
29             <TD>71</TD>  
30         </TR>  
31         <TR bgcolor="FFFFFF">  
32             <TD>王五</TD>  
33             <TD>33</TD>  
34             <TD>44</TD>  
35             <TD>55</TD>  
36         </TR>  
37     </TABLE>  
38     <script type="text/javascript">  
39         function a(x, y, color) {  
40             document  
41                     .write("<img   border='0'   style='position:   absolute;   left:   "  
42                             + (x)  
43                             + ";   top:   "  
44                             + (y)  
45                             + "; color: rgb(0, 136, 0);">"'   src='px.gif'   width=1   height=1>")  
46         }  
47         function getTop(tdobj) {  
48             vParent = tdobj.offsetParent;  
49             t = tdobj.offsetTop;  
50             while (vParent.tagName.toUpperCase() != "BODY") {  
51                 t += vParent.offsetTop;  
52                 vParentvParent = vParent.offsetParent;  
53             }  
54             return t;  
55         }  
56   
57         function getLeft(tdobj) {  
58             vParent = tdobj.offsetParent;  
59             t = tdobj.offsetLeft;  
60             while (vParent.tagName.toUpperCase() != "BODY") {  
61                 t += vParent.offsetLeft;  
62                 vParentvParent = vParent.offsetParent;  
63             }  
64             return t;  
65         }  
66         function line(x1, y1, x2, y2, color) {  
67             var tmp  
68             if (x1 >= x2) {  
69                 tmp = x1;  
70                 x1 = x2;  
71                 x2 = tmp;  
72                 tmp = y1;  
73                 y1 = y2;  
74                 y2 = tmp;  
75             }  
76             for ( var i = x1; i <= x2; i++) {  
77                 x = i;  
78                 y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;  
79                 a(x, y, color);  
80             }  
81         }  
82         //line(1,1,100,100,"000000");   
83         line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,  
84                 getTop(td1) + td1.offsetHeight, '#000000');  
85         line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,  
86                 getTop(td2) + td2.offsetHeight, '#000000');  
87     </script>