<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/raphael/2.2.7/raphael.min.js"></script> <title>无标题文档</title> </head> <style> * { margin: 0; padding: 0; } table { border: 1px solid #fff; /*去掉表格之间的空隙*/ border-collapse:collapse; margin: 100px auto; width:100%; heigth:100%; } caption { font-size: 20px; font-weight: bold; } th,td{ border: 1px solid #ccc; width: 80px; font-size: 14px; line-height: 40px; text-align: center; } </style> <body> <form id="form1" name="form1" method="post" action=""> <div id="lineDiv" style='position:absolute;z-index:8888;'></div> <table width="63%" border="0"> <tr> <td colspan="7"><h1 align="center">xxxxxxx</h1></td> </tr> <tr> <td id="lineTd" rowspan="2" style="border:#000000 solid 1px;219px;height:76px;vertical-align:top;" points="[110,79,222,42,222,79]"> 事项 <br> <br> 部门</td> <th width="9%"><div align="center">A</div></th> <th colspan="3"><div align="center">B</div></th> <th colspan="2"><div align="center">C</div></th> </tr> <tr> <td><div align="center">a</div></td> <td width="11%"><div align="center">b</div></td> <td width="13%"><div align="center">c</div></td> <td width="11%"><div align="center">d</div></td> <td width="11%"><div align="center">e</div></td> <td width="15%"><div align="center">f</div></td> </tr> <tr> <td><div align="center">D</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td><div align="center">E</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td><div align="center">F</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td><div align="center">G</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td><div align="center">H</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td><div align="center">I</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td><div align="center">J</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr> <td><div align="center">K</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> </table> </form> </body> <script> $(function() { var paper = new Raphael("lineDiv"); //paper.path("M0,0L110,85");//坐标(0,0)(110,85) //paper.path("M0,0L220,42");//坐标(0,0)(220,42) paper.path("M0,0L420,120");//坐标(0,0)(440,370) var offset = $("#lineTd").offset();//td的位置 //将画线的DIV移动到td的位置 $("#lineDiv").offset({top: offset.top, left: offset.left}); }) </script> </html> /** 注意：在谷歌浏览器中可以直接使用，在火狐浏览器中需要调初始位置（如下调：M-120，0，0L420,120）；在IE浏览器中调初始位置（如下调：M-120，0L420,120） */