码迷,mamicode.com
首页 > Web开发 > 详细

在jsp页面中显示表格(带斜线的表格)

时间:2019-09-02 19:18:57      阅读:398      评论:0      收藏:0      [点我收藏+]

标签:otc   浏览器   function   fse   row   weight   xxxxx   path   标题   

<!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]">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;事项
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;部门</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)

*/

在jsp页面中显示表格(带斜线的表格)

标签:otc   浏览器   function   fse   row   weight   xxxxx   path   标题   

原文地址:https://www.cnblogs.com/lpzpp/p/11448179.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!