今天小编跟大家讲解下有关html table表格斜线表头的实现方法总汇 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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: 80%; min-width: 300px; margin: 0 auto; } th{ border: 1px solid #ddd; text-align: center; height: 100px;} .th_head{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>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=0 bgcolor="000000"cellspacing="1"width=400 style="margin-left: 100px;"> <TR bgcolor="FFFFFF"> <TD width="111"height="52"><table width="100%"height="100%"border="0"cellpadding="0"cellspacing="0"> <tr> <td id="td1"></td> <td>成绩</td> </tr> <tr> <td>姓名</td> <td id="td2"></td> </tr> </table></TD> <TD width="81">数学</TD> <TD width="96">英语</TD> <TD width="99">C语言</TD> </TR> <TR bgcolor="FFFFFF"> <TD>张三</TD> <TD>55</TD> <TD>66</TD> <TD>77</TD> </TR> <TR bgcolor="FFFFFF"> <TD>李四</TD> <TD>99</TD> <TD>68</TD> <TD>71</TD> </TR> <TR bgcolor="FFFFFF"> <TD>王五</TD> <TD>33</TD> <TD>44</TD> <TD>55</TD> </TR> </TABLE> <script type="text/Javascript"> function a(x, y, color) { document .write("<img border='0' style='position: absolute; left:"+ (x) +"; top:"+ (y) +";background-color:"+ color +"' src='http://www.fly63.com/article/detial/415/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>来源：爱蒂网
