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

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

1、UI背景图实现

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

2、 css3中transform属性

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

3、利用border-top和border-left

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

css:

 table {
     border-collapse: collapse;
     border: 1px #eee solid;
     width: %;
     min-width: 300px;
     margin:  auto;
 }
 th{
     border: 1px solid #ddd;
     text-align: center;
     height: 100px;
 }
 .th_head{/*宽高100px,100px*/
     width:200px;
     position: relative;
 }
 .box{
     border-top: 100px #ff0 solid;  /*上边框宽度等于表格第一行行高*/
     border-left: 200px #0ff solid;  /*左边框宽度等于表格第一行第一格宽度*/
 }
 .a,.b{
     font-style: normal;
     display: block;
     position: absolute;
     width: 200px;
     height: 50px;
     line-height: 50px;
 }
 .a{
     top: 0px;  left: 0px;
 }
 .b{
     top: 50px;  left: 0px;
 }
 </style>

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

html:

 <table>
     <tr>
         <th class="th_head">
             <div class="box">
                 <em class="a">A</em>
                 <em class="b">B</em>
             </div>
         </th>
         <th>C</th>
     </tr>
 </table>

4、css3的canvas

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

5、js的实现

 <TABLE border= bgcolor="" cellspacing="" width=
         style="margin-left: 100px;">
         <TR bgcolor="FFFFFF">
             <TD width="" height=""><table width="100%" height="100%"
                     border="" cellpadding="" cellspacing="">
                     <tr>
                         <td id="td1"></td>
                         <td>成绩</td>
                     </tr>
                     <tr>
                         <td>姓名</td>
                         <td id="td2"></td>
                     </tr>
                 </table></TD>
             <TD width="">数学</TD>
             <TD width="">英语</TD>
             <TD width="">C语言</TD>
         </TR>
         <TR bgcolor="FFFFFF">
             <TD>张三</TD>
             <TD></TD>
             <TD></TD>
             <TD></TD>
         </TR>
         <TR bgcolor="FFFFFF">
             <TD>李四</TD>
             <TD></TD>
             <TD></TD>
             <TD></TD>
         </TR>
         <TR bgcolor="FFFFFF">
             <TD>王五</TD>
             <TD></TD>
             <TD></TD>
             <TD></TD>
         </TR>
     </TABLE>
     <script type="text/javascript">
         function a(x, y, color) {
             document
                     .write("<img   border='0'   style='position:   absolute;   left:   "
                             + (x)
                             + ";   top:   "
                             + (y)
                             + "; color: rgb(0, 136, 0);">"'   src='px.gif'   width=1   height=1>")
         }
         function getTop(tdobj) {
             vParent = tdobj.offsetParent;
             t = tdobj.offsetTop;
             while (vParent.tagName.toUpperCase() != "BODY") {
                 t += vParent.offsetTop;
                 vParentvParent = vParent.offsetParent;
             }
             return t;
         }  

         function getLeft(tdobj) {
             vParent = tdobj.offsetParent;
             t = tdobj.offsetLeft;
             while (vParent.tagName.toUpperCase() != "BODY") {
                 t += vParent.offsetLeft;
                 vParentvParent = vParent.offsetParent;
             }
             return t;
         }
         function line(x1, y1, x2, y2, color) {
             var tmp
             if (x1 >= x2) {
                 tmp = x1;
                 x1 = x2;
                 x2 = tmp;
                 tmp = y1;
                 y1 = y2;
                 y2 = tmp;
             }
             for ( var i = x1; i <= x2; i++) {
                 x = i;
                 y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
                 a(x, y, color);
             }
         }
         //line(1,1,100,100,"000000");
         line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,
                 getTop(td1) + td1.offsetHeight, '#000000');
         line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,
                 getTop(td2) + td2.offsetHeight, '#000000');
     </script>