标签：英语 有一个 了解 图片 etl 标签 height 是的 边框
在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法：
直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！
其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的兼容性问题，大家心里要要时刻保持着危机意识（IE还存在呢），如果你们公司的要求是只兼容chrome，那么，这个方法很适合你。
这种方法也很简单，但是这种写法有个明显的问题：这种其实就是利用两种颜色的不同的border划分表头的斜线的，斜线两边的颜色不能相同，如果是做一些促销活动之类的表格时可以用这种方法。但是如果我们需要斜线两边的颜色一样时，这种做法是不适用的。
css:
1 table { 2 border-collapse: collapse; 3 border: 1px #eee solid; 4 width: 80%; 5 min-width: 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 width: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 width: 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> 36 html: 37 38 <table> 39 <tr> 40 <th class="th_head"> 41 <div class="box"> 42 <em class="a">A</em> 43 <em class="b">B</em> 44 </div> 45 </th> 46 <th>C</th> 47 </tr> 48 </table>
设计坞https://www.wode007.com/sites/73738.html
这种效果其实还可以用css3的另一个新的标签canvas。将其作为画布画一条斜线是一种十分简单的做法，就不详细解释了，但是也有一个问题，就是老生常谈的兼容性问题了，如果只是兼容chrome，你想怎么办都行（为什么我们公司一直要考虑可恶的IE，我也想只做兼容谷歌的项目啊）。
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>
标签：英语 有一个 了解 图片 etl 标签 height 是的 边框
原文地址：https://www.cnblogs.com/ypppt/p/13060845.html
