html table表格斜线表头的实现方法总汇 |
您所在的位置：网站首页 › 做表格加斜线表头 › 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 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设计坞https://www.wode007.com/sites/73738.html html: 1 2 3 4 5 A 6 B 7 8 9 C 10 11
4、css3的canvas 这种效果其实还可以用css3的另一个新的标签canvas。将其作为画布画一条斜线是一种十分简单的做法，就不详细解释了，但是也有一个问题，就是老生常谈的兼容性问题了，如果只是兼容chrome，你想怎么办都行（为什么我们公司一直要考虑可恶的IE，我也想只做兼容谷歌的项目啊）。 5、js的实现 1 3 4 6 7 8 成绩 9 10 11 姓名 12 13 14 15 数学 16 英语 17 C语言 18 19 20 张三 21 55 22 66 23 77 24 25 26 李四 27 99 28 68 29 71 30 31 32 王五 33 33 34 44 35 55 36 37 38 39 function a(x, y, color) { 40 document 41 .write("") 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 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |