<!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;width: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）
*/
