画表格斜线vml或div+css
画表格斜线vml或div+css
用到的主知识点：
js获得内嵌式css中属性的值
vml画直线
演示地址：
http://www.vkill.net/demo/table_bias/table_bias.html
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>表格斜线 vml / div+css</title> <mce:style><!-- v/:* { Behavior: url(#default#VML) } --></mce:style><style mce_bogus="1">v/:* { Behavior: url(#default#VML) }</style> <mce:style type="text/css"><!-- * { margin:0px; padding: 0px; } body, div { margin: 0px auto; lineHeight: 20px; font-size: 14px; } ul, li { clear: both; list-style-type: none; } .floatl { float: left; } .floatr { float: right; } .clear { clear: both; } div.main { padding: 20px 0px 0px 20px; width: 800px; } div.title { text-align: left; position: relative; } div.a { /*直接修改这里的width和height，事件触发后js会根据这里的定义自动生成斜线*/ width: 60px; height: 40px; border: 1px solid #0000ff; } --></mce:style><style type="text/css" mce_bogus="1">* { margin:0px; padding: 0px; } body, div { margin: 0px auto; lineHeight: 20px; font-size: 14px; } ul, li { clear: both; list-style-type: none; } .floatl { float: left; } .floatr { float: right; } .clear { clear: both; } div.main { padding: 20px 0px 0px 20px; width: 800px; } div.title { text-align: left; position: relative; } div.a { /*直接修改这里的width和height，事件触发后js会根据这里的定义自动生成斜线*/ width: 60px; height: 40px; border: 1px solid #0000ff; }</style> <mce:script type="text/javascript"><!-- //获得css中属性的值，来源于网络 function getStyle(el,IE,FF){ var elem=document.getElementById(el) return navigator.appName=="Microsoft Internet Explorer"?elem.currentStyle[IE]:document.defaultView.getComputedStyle(elem, "").getPropertyValue(FF) } //根据div的宽度和高度自定设置斜线的坐标点 function autosetline_vml() { w=getStyle("title","width","width").replace(/[^0-9]*/g,"") h=getStyle("title","height","height").replace(/[^0-9]*/g,"") str = "<v:line from='0,0' to='" + w + "," + h + "' >" str+= "<v:stroke dashstyle='solit' />" str+= "</v:line>" document.getElementById("line").innerHTML=str } function autosetline_div() { w=getStyle("title","width","width").replace(/[^0-9]*/g,"") h=getStyle("title","height","height").replace(/[^0-9]*/g,"") var str="" for (i=0,x=1,y=1 ; i<h ; i++,x+=1,y+=w/h) { str+="<div style='border:0.3px solid #000000;font-size:0px;height:1px;width:1px;background-color:#000000;position:absolute;top:"+x+"px;left:"+y+"px'></div>" } document.getElementById("line").innerHTML=str } // --></mce:script> </head> <body> <div class="main"> <ul> <li> <div class="a floatl title" id="title"> <div style="position:absolute; z-index:11; width:100%; height:100%;" id="line"> </div> <div style="position:absolute; z-index:10; height:100%; width:100%" > <div class="floatr">成绩</div> <div class="floatl" style="position:absolute; bottom:0px;">姓名</div> </div> </div> <div class="a floatl"></div> <div class="a floatl"></div> <div class="a floatl"></div> </li> <li> <div class="a floatl"></div> <div class="a floatl"></div> <div class="a floatl"></div> <div class="a floatl"></div> </li> <li> <input type="button" onclick="autosetline_vml()" value="vml画线,只适合ie" /> </li> <li> <input type="button" onclick="autosetline_div()" value="div+css定位，用很多div模拟一条线,ie firefox opera都适合" /> </li> </ul> </div> </body> </html>